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

Question

我的状态是 {visibilityFilter: "completed"} 或 {visibilityFilter: "todo"}。基于此，我想将 classnames 分配给一个元素。像这样，

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

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

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

但其中 none 个正在运行。我知道如果我在 return 语句之外创建一个变量并在 HTML 中分配它，它就可以工作。像这样，

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

然后，

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

但我想知道如何在 return 语句中计算 class。

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>;
    }
}

另一种选择是使它成为一个箭头函数，如果你已经在你的转译器中启用了 class 属性（在撰写本文时，它们在 Babel 中的 stage-2 预设中，2017 年 1 月):

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 类来演示如何使用多个类。顺便说一句 - 注释不是有效的 JSX，所以不要按原样使用代码。

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

示例（基于）：

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>

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

Writing conditional statement inside render function in jsx

javascript

jsx

reactjs