javascript - 在jsx中的渲染函数中编写条件语句

Question

我的状态是{visibilityFilter: "completed"}或{visibilityFilter: "todo"} 。基于此，我想为元素分配类名。像这样的事情，

<span {this.state.visibilityFilter=="completed"?className="active":className:""}>Completed</span>

但是它不起作用。我尝试了它的不同变体，

{<span this.state.visibilityFilter=="completed"?className="active":className:"">Completed</span>}

但是它们都不起作用。我知道如果我在 return 语句之外创建一个变量并在 HTML 中分配它，它就可以工作。像这样，

let classCompleted = this.state.visibilityFilter == "completed"? "active":"";

然后，

<span className={`$(classCompleted)`}></span>

但我想知道如何在 return 语句中评估类。

Answer 1

你已经很接近了，你只需将 className 部分放在外面即可:

<span className={this.state.visibilityFilter=="completed" ? "active" : ""} onClick={this.handleFilter.bind(this,'completed')}>Completed</span>

<小时/>

题外话:

每次在 onClick 中使用 bind 意味着每次渲染该元素时都会重新绑定(bind)。您可以考虑在组件的构造函数中执行一次:

class YourComponent extends React.Component {
    constructor(...args) {
        super(...args);
        this.handleFilter = this.handleFilter.bind(this);
        // ...
    }
    handleFilter() {
        // ...
    }
    render() {
        return <span className={this.state.visibilityFilter=="completed" ? "active" : ""} onClick={this.handleFilter}>Completed</span>;
    }
}

如果您在转译器中启用了类属性，则另一种选择是使其成为箭头函数(截至 2017 年 1 月，它们位于 Babel 的 stage-2 预设中) :

class YourComponent extends React.Component {
    // ...
    handleFilter = event => {
        // ...
    };
    render() {
        return <span className={this.state.visibilityFilter=="completed" ? "active" : ""} onClick={this.handleFilter}>Completed</span>;
    }
}

这个例子:

class YourComponent extends React.Component {
    constructor() {
      super();
      this.state = {
        visibilityFilter: ""
      };
    }
    handleFilter = event => {
      this.setState({
        visibilityFilter: "completed"
      });
    };
    render() {
        return <span className={this.state.visibilityFilter == "completed" ? "active" : ""} onClick={this.handleFilter}>Completed</span>;
    }
}
ReactDOM.render(
  <YourComponent />,
  document.getElementById("react")
);

.active {
  color: blue;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>