在React中显示或隐藏元素

本文翻译自：Show or hide element in React

I am messing around with React.js for the first time and cannot find a way to show or hide something on a page via click event. 我第一次弄乱React.js，找不到通过click事件在页面上显示或隐藏内容的方法。 I am not loading any other library to the page, so I am looking for some native way using the React library. 我没有在页面上加载任何其他库，因此我正在寻找使用React库的本机方法。 This is what I have so far. 到目前为止，这就是我所拥有的。 I would like to show the results div when the click event fires. 当点击事件触发时，我想显示结果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);

---

#1楼

参考：https://stackoom.com/question/1eoK2/在React中显示或隐藏元素

---

#2楼

You set a boolean value in the state (eg 'show)', and then do: 您在状态（例如“ show”）中设置一个布尔值，然后执行以下操作：

var style = {};
if (!this.state.show) {
  style.display = 'none'
}

return <div style={style}>...</div>

---

#3楼

The key is to update the state of the component in the click handler using setState . 关键是使用setState更新点击处理程序中组件的状态。 When the state changes get applied, the render method gets called again with the new state: 应用状态更改后，将使用新状态再次调用render方法：

 var Search = React.createClass({ getInitialState: function() { return { showResults: false }; }, onClick: function() { this.setState({ showResults: true }); }, render: function() { return ( <div> <input type="submit" value="Search" onClick={this.onClick} /> { this.state.showResults ? <Results /> : null } </div> ); } }); var Results = React.createClass({ render: function() { return ( <div id="results" className="search-results"> Some Results </div> ); } }); ReactDOM.render( <Search /> , document.getElementById('container')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> 

JSFiddle JSFiddle

---

#4楼

<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>

---

#5楼

with the newest version react 0.11 you can also just return null to have no content rendered. 使用最新版本的react 0.11，您也可以只返回null以不呈现任何内容。

Rendering to null 渲染为空

---

#6楼

I created a small component that handles this for you: react-toggle-display 我创建了一个为您处理的小组件： react-toggle-display

It sets the style attribute to display: none !important based on the hide or show props. 它将样式属性设置为display: none !important基于hide或show道具。

Example usage: 用法示例：

var ToggleDisplay = require('react-toggle-display');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search />, document.body);