react实现div隐藏_在ReactJS中显示/隐藏组件

小编典典

我提供了一个工作示例，它遵循您的第二种方法。更新组件的状态是显示/隐藏子级的首选方法。

假设您有这个容器：

您可以使用现代Javascript(ES6，第一个示例)或经典JavaScript(ES5，第二个示例)来实现组件逻辑：

使用ES6显示/隐藏组件

class Child extends React.Component {

render() {

return (

I'm the child

);

}

}

class ShowHide extends React.Component {

constructor() {

super();

this.state = {

childVisible: false

}

}

render() {

return (

this.onClick()}>

Parent - click me to show/hide my child

{

this.state.childVisible

?

: null

}

)

}

onClick() {

this.setState(prevState => ({ childVisible: !prevState.childVisible }));

}

};

React.render(, document.getElementById('container'));

使用ES5显示/隐藏组件

var Child = React.createClass({

render: function() {

return (

I'm the child

);

}

});

var ShowHide = React.createClass({

getInitialState: function () {

return { childVisible: false };

},

render: function() {

return (

Parent - click me to show/hide my child

{

this.state.childVisible

?

: null

}

)

},

onClick: function() {

this.setState({childVisible: !this.state.childVisible});

}

});

React.render(, document.body);

2020-07-22