React Js有条件地应用类属性

Tony达蒙2020-03-10

我想有条件地显示和隐藏此按钮组，具体取决于从父组件传入的内容，如下所示：

<TopicNav showBulkActions={this.__hasMultipleSelected} />

....

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

....

var TopicNav = React.createClass({
render: function() {
return (
    <div className="row">
        <div className="col-lg-6">
            <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  Bulk Actions <span className="caret"></span>
                </button>
                <ul className="dropdown-menu" role="menu">
                  <li><a href="#">Merge into New Session</a></li>
                  <li><a href="#">Add to Existing Session</a></li>
                  <li className="divider"></li>
                  <li><a href="#">Delete</a></li>
                </ul>
            </div>
        </div>
    </div>
    );
  }
});

但是，{this.props.showBulkActions吗？'show'：'hidden'}。我在这里做错什么吗？

凯凯2020/03/10 09:49:06

当您要添加多个类时，这很有用。您可以使用空格将数组中的所有类连接在一起。

const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>

Sam蛋蛋Itachi2020/03/10 09:33:34

您可以使用if这样的概念

var Count=React.createClass({
getInitialState: function()
{
var state={counter:1};

setInterval(function(){
this.setState(
{counter:this.state.counter+(this.state.counter==1000?9999999999:1)})
}.bind(this),1);
return state;
},

render:function(){
return(
<div>
Counter<br/>
{this.state.counter}
</div>
)
}
}
)

凯凯2020/03/10 09:33:34

当您要添加多个类时，这很有用。您可以使用空格将数组中的所有类连接在一起。

const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>

Stafan村村达蒙2020/03/10 09:33:34

我想补充一点，您也可以将可变内容用作类的一部分

<img src={src} alt="Avatar" className={"img-" + messages[key].sender} />

上下文是机器人与用户之间的聊天，其样式根据发送者而变化，这是浏览器的结果：

<img src="http://imageurl" alt="Avatar" class="img-bot">

小宇宙前端2020/03/10 09:33:34

您可以使用ES6数组代替类名。答案基于Axel Rauschmayer博士的文章：有条件地在Array和对象文字中添加条目。

<div className={[
                 "classAlwaysPresent", 
                 ...Array.from(condition && ["classIfTrue"])
                ].join(" ")} />

小胖TonyLEY2020/03/10 09:33:34

或使用npm classnames。这非常容易且有用，特别是对于构造类列表

十三泡芙猿2020/03/10 09:33:34

如果您只需要一个可选的类名：

<div className={"btn-group pull-right " + (this.props.showBulkActions ? "show" : "")}>

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer