[英]Conditionally add element based on prop
How are you supposed to conditionally add a element like I have below? 您应该如何有条件地添加一个像我下面这样的元素? I only want
<div className='next-field__connected-wrapper'>
to be exist within if the withFilter
prop is true. 如果
withFilter
为true,我只希望<div className='next-field__connected-wrapper'>
存在。
render: function () {
if (this.props.withFilter) {
return (
<div>
<div className='next-card next-card__section next-card__section--no-bottom-spacing'>
<div className='next-field__connected-wrapper'>
{ this.props.children }
</div>
</div>
</div>
)
} else {
return (
<div>
<div className='next-card next-card__section next-card__section--no-bottom-spacing'>
{ this.props.children }
</div>
</div>
)
}
}
Keep in mind that JSX elements are just JavaScript objects and you can assign them to variables and pass them around like any other: 请记住,JSX元素只是JavaScript对象,您可以将它们分配给变量并像其他任何变量一样传递它们:
render: function () {
let inner = this.props.children;
if (this.props.withFilter) {
inner = (
<div className='next-field__connected-wrapper'>
{inner}
</div>
);
}
return (
<div>
<div className='next-card next-card__section next-card__section--no-bottom-spacing'>
{inner}
</div>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.