我们现在在使用 React 的过程中遇到了一些问题,但是它kinda归结为我们如何使用 React 的一部分。
我们应该如何显示/隐藏子组件?
这就是我们编码的方式(这只是我们组件的片段)...
_click: function() {
if ($('#add-here').is(':empty'))
React.render(<Child />, $('#add-here')[0]);
else
React.unmountComponentAtNode($('#add-here')[0]);
},
render: function() {
return(
<div>
<div onClick={this._click}>Parent - click me to add child</div>
<div id="add-here"></div>
</div>
)
}
最近我一直在阅读一些例子,就像它应该是这样的:
getInitialState: function () {
return { showChild: false };
},
_click: function() {
this.setState({showChild: !this.state.showChild});
},
render: function() {
return(
<div>
<div onClick={this._click}>Parent - click me to add child</div>
{this.state.showChild ? <Child /> : null}
</div>
)
}
我应该使用 React.render() 吗?它似乎停止了各种事情,比如shouldComponentUpdate
级联到孩子之类的事情e.stopPropagation
...
我提供了一个遵循第二种方法的工作示例。更新组件的状态是显示/隐藏子组件的首选方式。
假设你有这个容器:
<div id="container">
</div>
您可以使用现代 Javascript(ES6,第一个示例)或经典 JavaScript(ES5,第二个示例)来实现组件逻辑:
使用 ES6 显示/隐藏组件
在 JSFiddle 上尝试这个演示 https://jsfiddle.net/w4q5mwvw/441/
class Child extends React.Component {
render() {
return (<div>I'm the child</div>);
}
}
class ShowHide extends React.Component {
constructor() {
super();
this.state = {
childVisible: false
}
}
render() {
return (
<div>
<div onClick={() => this.onClick()}>
Parent - click me to show/hide my child
</div>
{
this.state.childVisible
? <Child />
: null
}
</div>
)
}
onClick() {
this.setState(prevState => ({ childVisible: !prevState.childVisible }));
}
};
React.render(<ShowHide />, document.getElementById('container'));
使用 ES5 显示/隐藏组件
在 JSFiddle 上尝试这个演示 https://jsfiddle.net/w4q5mwvw/440/
var Child = React.createClass({
render: function() {
return (<div>I'm the child</div>);
}
});
var ShowHide = React.createClass({
getInitialState: function () {
return { childVisible: false };
},
render: function() {
return (
<div>
<div onClick={this.onClick}>
Parent - click me to show/hide my child
</div>
{
this.state.childVisible
? <Child />
: null
}
</div>
)
},
onClick: function() {
this.setState({childVisible: !this.state.childVisible});
}
});
React.render(<ShowHide />, document.body);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)