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>

偏离主题的旁注：

每次在bind中使用onClick表示每次渲染元素时都会重新绑定。您可以考虑在组件的构造函数中执行一次：

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实用程序，可以有条件地将classNames连接在一起。

注意：我已添加了state和todo类来演示使用多个类。顺便说一句 - 注释无效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>

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

2 个答案: