我们创建一个新的项目， 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.兄弟组件交互
这个我们就不多说了，其实都是子组件传话给父组件的原理，要通过兄弟之间的父组件作为交互桥梁
原文链接：https://www.f2er.com/react/302674.html