如果 React 中的变量 == 某些东西，如何将类分配给元素？答案

【问题标题】：How to assign a class to an element if variable == something in React?如果 React 中的变量 == 某些东西，如何将类分配给元素？
【发布时间】：2014-11-27 17:40:39
【问题描述】：

我是 React 新手，之前经常使用 Angular。在 Angular 中，根据这样的变量分配一些类是尽可能简单的：

<p ng-class="{warning: warningLevel==3, critical: warningLevel==5}">Mars attacks!</p>

如何使用 React 在模板中做类似的事情？

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

classSet 的替代方法通常是使用简单的对象查找。

var levelToClass = {
  "3": "warning",
  "5": "critical"
};

// ...
render: function(){
  var level = levelToClass[this.props.warningLevel] || "";
  return <p className={"message " + level}>Test</p>
}

或者在某些情况下是三元：

render: function(){
  var level = this.props.warningLevel === 3 ? "warning"
            : this.props.warningLevel === 5 ? "critical"
            : "";
  return <p className={"message " + level}>Test</p>
}

【讨论】：

【解决方案2】：

简答：使用classSet()：http://facebook.github.io/react/docs/class-name-manipulation.html

更长的答案：

在 React 中并没有太大的不同，除了你编写一个普通的旧 JavaScript，这里有很多控制。此外，React 已经有一个漂亮的插件来使它更容易。在这种情况下，您的组件将如下所示：

var ClassnameExample = React.createClass({
  render: function() {
    var cx = React.addons.classSet;
    var classes = cx({
      "message": true,
      "warning": this.props.warningLevel === "3",
      "critical": this.props.warningLevel === "5"
    });
    return <p className={classes}>Test</p>;
  }
});

这是工作示例：http://jsbin.com/lekinokecoge/1/edit?html,css,js,output

试着改变这里的值：

React.renderComponent(<ClassnameExample warningLevel="3" />, document.body);

【讨论】：