現在、Reactの使用中にいくつかの問題が発生していますが、ちょっとこれは、私たちがこれまで 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>
)
}
shouldComponentUpdateReact.render() を使うべきだったのでしょうか?子へのカスケードなど、さまざまなことが停止するようですe.stopPropagation...
ベストアンサー1
2 番目のアプローチに従った実用的な例を提供しました。コンポーネントの状態を更新することは、子要素を表示/非表示にする推奨される方法です。
次のコンテナがあるとします:
<div id="container">
</div>
コンポーネント ロジックを実装するには、最新の JavaScript (ES6、最初の例) または従来の JavaScript (ES5、2 番目の例) を使用できます。
ES6 を使用してコンポーネントを表示/非表示にする
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を使用してコンポーネントを表示/非表示にする
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);