第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在React中顯示或隱藏元素

在React中顯示或隱藏元素

收到一只叮咚 2019-10-14 10:24:22
我第一次弄亂React.js,找不到通過click事件在頁面上顯示或隱藏內(nèi)容的方法。我沒有在頁面上加載任何其他庫,因此我正在尋找使用React庫的本機(jī)方法。到目前為止,這就是我所擁有的。當(dāng)點(diǎn)擊事件觸發(fā)時(shí),我想顯示結(jié)果div。var Search= React.createClass({    handleClick: function (event) {        console.log(this.prop);    },    render: function () {        return (            <div className="date-range">                <input type="submit" value="Search" onClick={this.handleClick} />            </div>        );    }});var Results = React.createClass({    render: function () {        return (            <div id="results" className="search-results">                Some Results            </div>        );    }});React.renderComponent(<Search /> , document.body);
查看完整描述

3 回答

?
慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊

<style type="text/css">

    .hidden { display:none; }

</style>

render: function() {

    return (

      <div className={this.props.shouldHide ? 'hidden' : ''}>

        This will be hidden if you set <tt>props.shouldHide</tt> 

        to something truthy.

      </div>

    );

}


// or in more modern JS and stateless react

const Example = props => <div className={props.shouldHide}/>Hello</div>


查看完整回答
反對(duì) 回復(fù) 2019-10-14
?
largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊

這是三元運(yùn)算符的另一種語法:


{ this.state.showMyComponent ? <MyComponent /> : null }

等效于:


{ this.state.showMyComponent && <MyComponent /> }

精益為何


以及其他語法 display: 'none';


<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />

但是,如果您使用過度display: 'none',則會(huì)導(dǎo)致DOM污染,并最終減慢您的應(yīng)用程序的速度。


查看完整回答
反對(duì) 回復(fù) 2019-10-14
  • 3 回答
  • 0 關(guān)注
  • 4453 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)