react学习笔记12：组件之间交互

发布时间：2020-12-15 06:46:47 所属栏目：百科来源：网络整理

导读：我们创建一个新的项目， component-test 专门学习我们的组件交互。利用create-react-app工具 create-react-app component-testcd component-testnpm start 修正代码： index.html: !doctype htmlhtml lang="en" head meta charset="utf-8" meta name="viewp

我们创建一个新的项目， component-test 专门学习我们的组件交互。

利用create-react-app工具

create-react-app component-test
cd component-test
npm start

修正代码：

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <title>组件交互</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

把其他文件全部删除即可！

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
  render() {
    return (
		<div>
			组件交互
		</div>
    );
  }
}


ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

组件之间的关系可简单分为：

父子组件

爷孙组件

兄弟组件

当前和兄弟的子组件

当前和兄弟的孙组件

1.父子组件交互

1.1父组件传值给子组件

我们使用的就是this.props.xx接收和显示：

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
	
	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg1: "1儿子你好",msg2: "2儿子你好"
        };

    }
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

我们看到效果：

调用位置利用某个属性设置要传递的值，在子组件的this.props就会获取到！

1.2子组件传话给父组件

我们的需求是这样的，我们点击1儿子的一个按钮，通知父组件我收到了你的问候，把父组件对1儿子的问候语改为：

“谢谢1儿子的回复”

既然父组件可以把状态值传给子组件，那么我们就把父组件的一个方法传给子组件，这个父组件的方法就是改变msg1的值：

全部代码：

import React,msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

我们点击之后：

变为：

2.爷孙组件交互

2.1爷孙传值

我们给1儿子加2个儿子，出现2孙子：

儿子1给他的儿子传值：

2个孙子：

全部代码：

import React,msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候：{this.props.msg}</div>
			我的儿子1：<Three1 msg={this.props.msg} />
			我的儿子2<Three2 msg={this.props.msg} />
		</div>
    );
  }
}

class Three1 extends Component {
  render() {
    return (
		<div>
			我是孙子1（爸爸是1儿子）
			<div>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}
class Three2 extends Component {
  render() {
    return (
		<div>
			我是孙子2（爸爸是1儿子）
			<div>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

同理，非常简的处理，就是不断传递

2.2孙子传话给爷爷

其实同上面的原理，我们直接修改代码：

点击修改：

全部代码：

import React,msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候：{this.props.msg}</div>
			我的儿子1：<Three1 msg={this.props.msg}  setMsg1={this.props.setMsg1} />
			我的儿子2<Three2 msg={this.props.msg} />
		</div>
    );
  }
}

class Three1 extends Component {
  render() {
    return (
		<div>
			我是孙子1（爸爸是1儿子）
			<div onClick={this.props.setMsg1}>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}
class Three2 extends Component {
  render() {
    return (
		<div>
			我是孙子2（爸爸是1儿子）
			<div>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

3.兄弟组件交互

这个我们就不多说了，其实都是子组件传话给父组件的原理，要通过兄弟之间的父组件作为交互桥梁

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!