在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 意味着每次该元素渲染时都会重新绑定。您可以考虑在组件的构造函数中执行一次：

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>

Answer 2

使用 classNames，一个简单的 JavaScript 实用程序，用于有条件地将类名连接在一起。

注意：我添加了 state 和 todo 类来演示如何使用多个类。顺便说一句 - cmets 不是有效的 JSX，所以不要按原样使用代码。

<span className={
    state: true, // always 
    active: this.state.visibilityFilter === "completed", // conditional
    todo: this.state.visibilityFilter !== "todo" // conditional
}>
Completed
</span>}

示例（基于T.J. Crowder`s code）：

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

.state {
  color: red;
  cursor: pointer;
}

.active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>
<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>