React Js有条件地应用类属性

JavaScript

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'}。我在这里做错什么吗？

第406篇《React Js有条件地应用类属性》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
凯凯 2020.03.10

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

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

您可以使用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

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

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

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

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

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

<img src="http://imageurl" alt="Avatar" class="img-bot">
小宇宙前端 2020.03.10

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

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

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

十三泡芙猿 2020.03.10

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android