在 ReactJS 中显示/隐藏组件
[英] Show/Hide components in ReactJS
本文介绍了在 ReactJS 中显示/隐藏组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们现在在使用 React 时遇到了一些问题，但它有点归结为我们使用 React 的方式的一部分.
我们应该如何显示/隐藏子组件?
这就是我们的编码方式(这只是我们组件的片段)...
_click: function() {if ($('#add-here').is(':empty'))React.render(, $('#add-here')[0]);别的React.unmountComponentAtNode($('#add-here')[0]);},渲染:函数(){返回(<div><div onClick={this._click}>父级 - 点击我添加子级</div><div id="add-here"></div>
)}
最近我一直在阅读一些例子，就像它应该是这样的:
getInitialState: function () {返回 { showChild: false };},_click:函数(){this.setState({showChild: !this.state.showChild});},渲染:函数(){返回(<div><div onClick={this._click}>父级 - 点击我添加子级</div>{this.state.showChild ?<孩子/>: 空值}
)}
我应该使用 React.render() 吗?它似乎阻止了诸如 shouldComponentUpdate 之类的东西级联到 child 和诸如 e.stopPropagation...
之类的东西
解决方案
我提供了一个工作示例，它遵循您的第二种方法.更新组件的状态是显示/隐藏子组件的首选方式.
假设你有这个容器:
您可以使用现代 Javascript(ES6，第一个示例)或经典 JavaScript(ES5，第二个示例)来实现组件逻辑:
使用 ES6 显示/隐藏组件
在 JSFiddle 上现场试用此演示
class Child extends React.Component {使成为() {return (<div>我是孩子</div>);}}class ShowHide 扩展 React.Component {构造函数(){极好的();this.state = {childVisible:假}}使成为() {返回 (<div><div onClick={() =>this.onClick()}>家长 - 单击我以显示/隐藏我的孩子
{this.state.childVisible?<孩子/>: 空值}
)}点击(){this.setState(prevState => ({ childVisible: !prevState.childVisible }));}};React.render(, document.getElementById('container'));
使用 ES5 显示/隐藏组件
在 JSFiddle 上现场试用此演示
var Child = React.createClass({渲染:函数(){return (<div>我是孩子</div>);}});var ShowHide = React.createClass({getInitialState: 函数 () {返回 { childVisible: false };},渲染:函数(){返回 (<div><div onClick={this.onClick}>家长 - 单击我以显示/隐藏我的孩子
{this.state.childVisible?<孩子/>: 空值}
)},点击:函数(){this.setState({childVisible: !this.state.childVisible});}});React.render(, document.body);
We have been experiencing some problems in using react now but it kinda boils to one part of how we have been using react.
How should we have been showing/hiding child components?
This is how we have coded it (this are only snippets of our components)...
_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>
)
}
and lately I've been reading examples like it should've been somewhere along this lines:
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>
)
}
Should I have been using that React.render()? It seems to stop various things like shouldComponentUpdate to cascade to child and things like e.stopPropagation...
解决方案
I've provided a working example that follows your second approach. Updating the component's state is the preferred way to show/hide children.
Given you have this container:
<div id="container">
</div>
you can either use modern Javascript (ES6, first example) or classic JavaScript (ES5, second example) to implement the component logic:
Show/hide components using ES6
Try this demo live on JSFiddle
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'));
Show/hide components using ES5
Try this demo live on JSFiddle
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);
这篇关于在 ReactJS 中显示/隐藏组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
