如何在React类渲染方法中为元素提供动态className

Question

我有一个名为Alert的ReactClass.它的render方法返回一个div类,alert alert-success或者alert alert-error根据创建元素时传递的类型.我只想知道如何根据alert元素的类型添加类.

这是我的尝试:

var Alert = ReactClass({
  render: function() {
    return <div className="alert {this.props.type}">{this.props.message}</div>
  }
});

var successAlert = React.createElement(Alert, {
  type: 'alert-success'
  message: 'Information saved successfully!!'
});

编译JSX模板时this.props.type不会转换为传递给元素的类.怎么做到这一点？

Answer 1

看起来我找到了回答我的问题.我们可以简单地做这样的事情:

var Alert = ReactClass({
  render: function() {
    return <div className={"alert " + this.props.type}>{this.props.message}</div>
  }
});

{ }在这种情况下,只需将您的类放在模板评估器中.根据您的道具和状态创建您的类字符串.

希望这对其他人有帮助.