Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la communication par composants dans React. Quelles sont les précautions lors de l'utilisation de la communication par composants dans React. Voici des cas pratiques, jetons un coup d'œil.
Ici, nous parlons uniquement de la communication entre le composant React et le composant lui-même. La communication entre les composants est principalement divisée en trois parties :
this.refs.c1.changeChildren1
text={this.state.text}
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'));
this.props.change(event.target.value);
//子组件向父组件通信 //父组件 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'));
//兄弟组间通信-通过共同的父组件通信 //父组件 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'));
est appelé. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
//兄弟组间通信-通过 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'));
Explication détaillée des étapes pour mettre en évidence les éléments sélectionnés li dans l'implémentation de React
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!