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

Question

我有一个名为 Alert 的 ReactClass。它的渲染方法 returns a div with class alert alert-success or alert alert-error 根据创建元素时传递的类型。我只想知道如何根据警报元素的类型添加 class。

这是我的尝试：

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 不会转换为传递给元素的 class。如何实现？

Answer 1

实现此目的的一种方法是创建一个包含所有 classes 的字符串，然后将其设置为组件的 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>
  }
});

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

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 2

看看 classnames 包。你可以这样做：

className={classNames('alert', `alert-${type}`)}

或

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

Answer 3

看来我找到了问题的答案。我们可以简单地做这样的事情：

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

在这种情况下，只需将您的 classes 放入模板计算器 { } 中。根据您的道具和状态创建您的 class 字符串。

希望这对其他人有帮助。

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"}`}

你会得到

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

How to provide dynamic className to element in React Class render method

javascript

rendering

reactjs