本文共 2958 字，大约阅读时间需要 9 分钟。

本文翻译自：

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 (            
   
                
                
   
        );    }});var Results = React.createClass({    render: function () {        return (            
   
                    Some Results            
   
        );    }});React.renderComponent(
    , document.body);

#1楼

参考：

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

#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 ( 
     
 
       { this.state.showResults ? 
       : null } 
     
 ); } }); var Results = React.createClass({ render: function() { return ( 
     
       Some Results 
     
 ); } }); ReactDOM.render( 
      , document.getElementById('container'));

#4楼

render: function() {    return (      
   
            This will be hidden if you set 
    props.shouldHide         to something truthy.      
   
    );}// or in more modern JS and stateless reactconst Example = props => 
   
    Hello
   

#5楼

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

#6楼

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

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 (            
   
                
                    
                        
                     
                
   
        );    }});var Results = React.createClass({    render: function() {        return (            
   
                    Some Results            
   
        );    }});React.renderComponent(
   , document.body);

转载地址：http://iyexb.baihongyu.com/