详解React组件通信（父传子、子传父、兄弟组件传值）
<h2 id="1父组件传值子组件">1、父组件传值子组件</h2><p>React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图：</p>
<p><img src="https://img2020.cnblogs.com/blog/480452/202003/480452-20200304193735358-925055681.jpg" alt="" loading="lazy"></p>
<p>在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。</p>
<p>父组件向子组件传值，通过<code>props</code>，将父组件的<code>state</code>传递给了子组件。</p>
<p>父组件代码片段：</p>
<pre><code class="language-javascript">constructor(props){
super(props)
this.state={
message:"i am from parent"
}
}
render(){
return(
<Child txt={this.state.message}/>
)
}
}
</code></pre>
<p>子组件代码片段：</p>
<pre><code class="language-javascript">render(){
return(
<p>{this.props.txt}</p>
)
}
</code></pre>
<p><strong>完整示例</strong></p>
<p>创建父组件 <code>index.js</code></p>
<pre><code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';
import User from './User';//引入子组件
//定义数据
const person = {
name: 'Tom',
age:20
}
ReactDOM.render(
//渲染子组件，并向子组件传递name,age属性
<User name={person.name} age={person.age}></User>
, document.getElementById('root'));
</code></pre>
<p>创建子组件 <code>User.js</code></p>
<pre><code class="language-javascript">import React from 'react';
class User extends React.Component{
render(){
return (
// 使用props属性接收父组件传递过来的参数
<div>{this.props.name}，{this.props.age}</div>
);
}
}
export default User;
</code></pre>
<p>在父组件中可以使用展开运算符 <code>...</code> 传递对象</p>
<p><code>index.js</code>文件</p>
<pre><code class="language-javascript">ReactDOM.render(
//渲染子组件，并向子组件传递name,age属性
<User {...person}></User>
, document.getElementById('root'));
</code></pre>
<p><code>User.js</code>文件</p>
<pre><code class="language-javascript">render(){
return (
// 使用props属性接收父组件传递过来的参数
<div>{this.props.name}，{this.props.age}</div>
);
}
</code></pre>
<h2 id="2子组件传值父组件">2、子组件传值父组件</h2>
<p>子组件通过<strong>调用父组件传递到子组件的方法</strong>向父组件传递消息的。</p>
<p><img src="https://img2020.cnblogs.com/blog/480452/202003/480452-20200304194643570-137799462.jpg" alt="" loading="lazy"></p>
<p><strong>完整案例</strong></p>
<p>子组件 <code>Son.js</code> 文件代码示例：</p>
<pre><code class="language-javascript">import React from 'react';
class Son extends React.Component {
//构造方法
constructor(){
super();
this.state = {
inputValue:''
}
}
//按钮点击事件
handleClick(){
//通过props属性获取父组件的getdata方法，并将this.state值传递过去
this.props.getdata(this.state.inputValue);
}
//输入框事件，用于为this.state赋值
handleChange(e){
this.setState({
inputValue: e.target.value
});
}
render(){
return (
<React.Fragment>
<input onChange={this.handleChange.bind(this)}></input>
<button onClick={this.handleClick.bind(this)}>点击获取数据</button>
</React.Fragment>
);
}
}
export default Son;
</code></pre>
<p>父组件 <code>Parent.js</code> 文件代码示例：</p>
<pre><code class="language-javascript">import React from 'react';
import Son from './Son';
class Parent extends React.Component {
//构造方法
constructor(){
super();
this.state = {
mess: '' //初始化mess属性
}
}
//用于接收子组件的传值方法，参数为子组件传递过来的值
getDatas(msg){
//把子组件传递过来的值赋给this.state中的属性
this.setState({
mess: msg
});
}
render(){
return (
<React.Fragment>
{/* 渲染子组件，设置子组件访问的方法，
getdata属性名为子组件中调用的父组件方法名 */}
<Son getdata={this.getDatas.bind(this)}></Son>
<div>展示数据：{this.state.mess}</div>
</React.Fragment>
);
}
}
export default Parent;
</code></pre>
<p>入口文件 <code>index.js</code>示例代码：</p>
<pre><code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
ReactDOM.render(<Parent></Parent>, document.getElementById('root'));
</code></pre>
<h2 id="3兄弟组件传值">3、兄弟组件传值</h2>
<p>兄弟组件之间的传值，是通过父组件做的中转 ，流程为：</p>
<p><strong>组件A</strong> -- <code>传值</code> --> <strong>父组件</strong> -- <code>传值</code> --> <strong>组件B</strong></p>
<p>其实可以理解为把前两个步骤又重新做了一遍，即先执行子组件传值父组件，然后再执行父组件传值子组件，效果如下图：</p>
<p><img src="https://img2020.cnblogs.com/blog/480452/202003/480452-20200304195659166-1986727177.jpg" alt="" loading="lazy"></p>
<p>代码示例：</p>
<p>创建 <code>Acls.js</code> 组件，用于提供数据</p>
<pre><code class="language-javascript">import React from 'react';
class Acls extends React.Component {
//按钮点击事件，向父组件Pcls.js传值
handleClick(){
this.props.data("hello...React...");
}
render(){
return (
<button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
);
}
}
export default Acls;
</code></pre>
<p>创建父组件 <code>Pcls.js</code> 用于中转数据</p>
<pre><code class="language-javascript">import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls';
class Pcls extends React.Component {
//构造函数
constructor(){
super();
this.state = {
mess: ''
}
}
//向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值
getDatas(data){
this.setState({
mess: data
});
}
render(){
return (
<React.Fragment>
Pcls组件中显示按钮并传值：
<Acls data={this.getDatas.bind(this)}></Acls>
<Bcls mess={this.state.mess}></Bcls>
</React.Fragment>
);
}
}
export default Pcls;
</code></pre>
<p>创建子组件 <code>Bcls.js</code> 用于展示从 <code>Acls.js</code> 组件中生成的数据</p>
<pre><code class="language-javascript">import React from 'react';
class Bcls extends React.Component {
render(){
return (
<div>在Bcls组件中展示数据：{this.props.mess}</div>
);
}
}
export default Bcls;
</code></pre><br><br>
来源：https://www.cnblogs.com/jpwz/p/12411804.html
頁:
[1]