如何在React中为元素分配类，如果变量==某个值？

Question

我刚接触React，之前熟练使用Angular。在Angular中，根据变量分配一些类非常简单，像这样:

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

我该如何在React模板中实现类似的功能？

- Sergei Basharov

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

- Brigand

Answer 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);

- okonetchnikov