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

Question

我有一个名为Alert的ReactClass。它的render方法根据创建元素时传递的类型返回一个带有类alert alert-success或alert alert-error的div。我只想知道如何根据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>
  }
});

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

希望这对其他人有帮助。

Answer 2

实现此目的的一种方法是使用一个包含所有类的字符串，然后将其设置为Component className：

var Alert = ReactClass({

  var yourClassName = 'alert ';

  // Add any additional class names
  yourClassName += this.props.type + ' ';

  render: function() {
    return <div className={yourClassName}>{this.props.message}</div>
  }
});

或者您可以将类名存储在数组中，并在准备好使用它时将其转换为类友好字符串：

var Alert = ReactClass({

  var yourClassArray = [];

  // Add any additional class names
  yourClassArray.push('alert');
  yourClassArray.push(this.props.type);

  var classString = yourClassArray.join(' ');

  render: function() {
    return <div className={classString}>{this.props.message}</div>
  }
});

Answer 3

查看classnames包。你可以做这样的事情：

className={classNames({
    'alert': true,
    'alert-success': success,
    'alert-error': error
})

或

"moduleResolution": "node",

Answer 4

您可以使用JavaScript template literals

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

您的代码可以通过以下方式编写：

const Alert = ({type, message}) =>
    <div className={`alert ${type}`}>{message}</div>

Answer 5

编写代码

className={`form-control-sm d-inline per_player ${"per_player_b_" + index + "_score"}`}

您将得到