今回はReactでコンポーネント通信を使う際の注意点について、実際の事例を交えながら詳しく解説していきます。
コンポーネント通信
ここでは、React コンポーネントとコンポーネント自体の間の通信についてのみ説明します。コンポーネント通信は主に 3 つの部分に分かれています:
親コンポーネントから子コンポーネントへの通信: 親コンポーネントが子コンポーネントにパラメータを渡す、または親コンポーネントは子コンポーネントのメソッドを呼び出します
サブコンポーネントは親コンポーネントと通信します: サブコンポーネントは親コンポーネントにパラメータを渡すか、サブコンポーネントは親コンポーネントのメソッドを呼び出します
兄弟コンポーネントの通信: 兄弟コンポーネントはパラメータを渡すか、相互に呼び出します
ネストされた関係を深くしすぎないことをお勧めします
親コンポーネントは子コンポーネントと通信します
親: 子コンポーネントを呼び出すメソッドは主に this.refs.c1.changeChildren1 を使用します。 this.refs.c1.changeChildren1
父：向子组件传参主要使用 text={this.state.text}
子：定义方法 changeChildren1 供父组件调用
子：使用通过属性 this.props.text 获取来自父组件的传参
//父组件向子组件通信
//父组件
var ParentComponent1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//输入事件
change: function(event){
this.setState({text: event.target.value});
//调用子组件的方法
this.refs.c1.changeChildren1(event.target.value);
},
render: function(){
return (
<p>
<p><label>父组件</label><input type="text" onChange={this.change}/></p>
<ChildrenComponent1 ref="c1" text={this.state.text}/>
</p>
)
}
})
//子组件
var ChildrenComponent1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被父组件调用执行
changeChildren1: function(text){
this.setState({text: text});
},
render: function(){
return (
<p>
<p>子组件-来自父组件的调用：{this.state.text}</p>
<p>子组件-来自父组件的传参：{this.props.text}</p>
</p>
)
}
})
ReactDOM.render(<ParentComponent1/>, document.getElementById('p1'));ログイン後にコピー
子组件向父组件通信
親: 子コンポーネントにパラメータを渡すには主に
text={this.state.text} を使用します
- Child: 親コンポーネントが呼び出すメソッドchangeChildren1を定義します
Child : パス属性
this.props.text を使用して、親コンポーネントから渡されたパラメータを取得します
//子组件向父组件通信
//父组件
var ParentComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被子组件调用执行
changeParent: function(text){
this.setState({text: text});
},
render: function(){
return (
<p>
<p>父组件-来自子组件的调用：{this.state.text}</p>
<ChildrenComponent2 change={this.changeParent}/>
</p>
)
}
})
//子组件
var ChildrenComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件</label><input type="text" onChange={this.change}/></p>
</p>
)
}
})
ReactDOM.render(<ParentComponent2/>, document.getElementById('p2'));ログイン後にコピー
子コンポーネントは親コンポーネントと通信します
Parent: メソッドchangeParentを定義します呼び出す子コンポーネント
子: 親コンポーネントを呼び出すメソッドは主にthis.props.change(event.target.value);を使用します
//兄弟组间通信-通过共同的父组件通信
//父组件
var ParentComponent3 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被子组件2调用，向子组件1通信
changeChildren1: function(text){
//调用子组件1的方法
this.refs.cp1.changeState(text);
},
//被子组件1调用，向子组件2通信
changeChildren2: function(text){
//调用子组件2的方法
this.refs.cp2.changeState(text);
},
render: function(){
return (
<p>
<p>父组件-来自子组件的调用：{this.state.text}</p>
<ChildrenComponent3_1 change={this.changeChildren2} ref="cp1"/>
<ChildrenComponent3_2 change={this.changeChildren1} ref="cp2"/>
</p>
)
}
})
//子组件1
var ChildrenComponent3_1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件1</label><input type="text" onChange={this.change}/></p>
<p>来自子组件2的调用-{this.state.text}</p>
</p>
)
}
})
//子组件2
var ChildrenComponent3_2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件2</label><input type="text" onChange={this.change}/></p>
<p>来自子组件1的调用-{this.state.text}</p>
</p>
)
}
})
ReactDOM.render(<ParentComponent3/>, document.getElementById('p3'));ログイン後にコピー
🎜方法 1: 共通の親コンポーネントを介して通信します🎜🎜🎜🎜。React コンポーネントにはトップレベル要素が 1 つだけ必要であるため、兄弟コンポーネント間には共通の親要素 (コンポーネント) が必要であり、兄弟が共通の親を介して通信できるようになります。通信方法は、上で紹介した父子と息子父の組み合わせと同じです🎜
//兄弟组间通信-通过 context 通信
//父组件
var ParentComponent4 = React.createClass({
getChildContext: function(){
return {
changeChildren1: function(text){
this.refs.cp1.changeState(text)
}.bind(this),
changeChildren2: function(text){
this.refs.cp2.changeState(text)
}.bind(this)
}
},
childContextTypes: {
changeChildren1: React.PropTypes.func.isRequired,
changeChildren2: React.PropTypes.func.isRequired
},
render: function(){
return (
<p>
<ChildrenComponent4_1 ref="cp1"/>
<ChildrenComponent4_2 ref="cp2"/>
</p>
)
}
})
//子组件1
var ChildrenComponent4_1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
contextTypes: {
changeChildren2: React.PropTypes.func.isRequired
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.context.changeChildren2(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件1</label><input type="text" onChange={this.change}/></p>
<p>来自子组件2的调用-{this.state.text}</p>
</p>
)
}
})
//子组件2
var ChildrenComponent4_2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
contextTypes: {
changeChildren1: React.PropTypes.func.isRequired
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.context.changeChildren1(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件2</label><input type="text" onChange={this.change}/></p>
<p>来自子组件1的调用-{this.state.text}</p>
</p>
)
}
});
ReactDOM.render(<ParentComponent4/>, document.getElementById('p4'));ログイン後にコピー
🎜 方法 2: コンテキストを介した通信 🎜 は、共通の親コンポーネントを介した通信と同じです。このコンテキストは 🎜rrreee🎜 と呼ばれます。この記事のケースを読んだ後は、あなたはそれをマスターしたと思います。さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜PromiseA+の実装手順の詳細な説明🎜🎜🎜🎜🎜 React実装で選択されたliを強調表示する手順の詳細な説明🎜🎜🎜
以上がReactにおけるコンポーネント通信の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
