在jsx的render函数中编写条件语句 [英] Writing conditional statement inside render function in jsx

问题描述

我的状态是{visibilityFilter: "completed"}或{visibilityFilter: "todo"}.基于此，我想为一个元素分配类名.像这样的东西

My state is {visibilityFilter: "completed"} or {visibilityFilter: "todo"}. Based on this I want to assign classnames to an element. Something like this,

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

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

But it's not working. I tried different variations of it,

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

但是它们都不起作用.我知道，如果我在return语句外创建变量并将其分配为HTML，则它可以工作.像这样

But none of them are working. I know that it can work if I create a variable outside return statement and assign it in HTML. Like this,

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

然后

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

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

But I want to know how to do evaluate class in return statement.

推荐答案

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

You're close, you just put the className part outside:

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

---

题外注:

---

Off-topic side note:

每次在onClick中使用bind意味着您每次渲染都会重新绑定.您可能考虑在组件的构造函数中执行一次:

Using bind in the onClick every time means you'll re-bind every time that element is rendered. You might consider doing it once, in the component's constructor:

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预设中)，则另一种选择是使其成为箭头功能:

Another option is to make it an arrow function, if you've enabled class properties in your transpiler (they're in the stage-2 preset in Babel as of this writing, January 2017):

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>

这篇关于在jsx的render函数中编写条件语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！