Javascript 如何在 React Class 渲染方法中为元素提供动态类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35787088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to provide dynamic className to element in React Class render method
提问by sachinjain024
I have a ReactClass with name Alert. Its render method returns a div with class alert alert-successor alert alert-erroraccording to the type passed while creating element. I just want to know how to add class based on the type of alert element.
我有一个名为 Alert 的 ReactClass。它的 render 方法返回一个带有类的 divalert alert-success或alert alert-error根据创建元素时传递的类型。我只想知道如何根据警报元素的类型添加类。
Here is my attempt:
这是我的尝试：
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!!'
});
When JSX Template is compiled this.props.typeis not converted to the class passed to element. How to achieve this ?
编译 JSX 模板时this.props.type不会转换为传递给元素的类。如何实现这一目标？
采纳答案by sachinjain024
Looks like I have found answer to my question. We can simply do something like this:
看起来我已经找到了我的问题的答案。我们可以简单地做这样的事情：
var Alert = ReactClass({
render: function() {
return <div className={"alert " + this.props.type}>{this.props.message}</div>
}
});
Just put your classes inside Template evaluators { }in this case. Create your class string based on your props and states.
{ }在这种情况下，只需将您的类放在模板评估器中。根据您的道具和状态创建您的类字符串。
Hope this is helpful to others.
希望这对其他人有帮助。
回答by Nick Zuber
One way to accomplish this is to have a string which will contain all of your classes and then set it to the Component's className:
实现此目的的一种方法是拥有一个包含所有类的字符串，然后将其设置为组件的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>
}
});
or alternatively you can store your class names in an array and convert it to a class friendly string when you're ready to use it:
或者，您可以将类名存储在数组中，并在准备使用时将其转换为类友好字符串：
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>
}
});
回答by David L. Walsh
Take a look at the classnamespackage. You can do stuff like this:
查看classnames包。你可以做这样的事情：
className={classNames('alert', `alert-${type}`)}
or
或者
className={classNames({
'alert': true,
'alert-success': success,
'alert-error': error
})
回答by Vlad Bezden
You can use JavaScript template literals
您可以使用 JavaScript模板文字
var Alert = ReactClass({
render: function() {
return <div className={`alert ${this.props.type}`}>{this.props.message}</div>
}
});
Your code can be written in following way:
您的代码可以按以下方式编写：
const Alert = ({type, message}) =>
<div className={`alert ${type}`}>{message}</div>
回答by Pradip Rupareliya
Write in code
写在代码中
className={`form-control-sm d-inline per_player ${"per_player_b_" + index + "_score"}`}
and You will get
你会得到
