react实现div隐藏_在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. I am not loading any other library to the page, so I am looking for some native way using the React library. This is what I have so far. I would like to show the results div when the click event fires.

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

解决方案

The key is to update the state of the component in the click handler using setState. When the state changes get applied, the render method gets called again with the new state:

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'));