正文
React的组件间通信
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、React的单向数据流
React是单向数据流，数据主要从父节点传递到子节点（通过props）。
如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。这通常被称为“自顶向下”或“单向”数据流。任何状态始终由某个特定组件所有，并且从该状态导出的任何数据或UI只能影响树中“下方”的组件。
二、React的组件间通信1）父级-》子级
比较简单，直接调用时设置props值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "菜鸟教程",
site: "http://www.runoob.com"
};
}, render: function() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
}); var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
}); var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}); ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>
2）子级-》父级
用回调函数，传参
class Father extends React.Component{
constructor(props){
super(props);
this.state={
inputValue:""
}
}
//在回调函数里处理子级的输入
handleInputChange(e){
this.setState({
inputValue:e.target.value
});
}
render(){
return (
<div>
<span>输入为{this.state.inputValue}</span>
<Child onChange={this.handleInput2Change.bind(this)} />
</div>
);
}
}
//通过onChange={this.props.onChange}，子级输入事件发生时，调用的是父级传入的回调函数
class Child extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
ReactDOM.render(
<Father />,
document.getElementById('root')
);
3）兄弟《-》兄弟：
按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
下面实现一个组件通信的例子，一个输入框的数据改变，另一个输入框数据会跟随同时改变。
class Form1 extends React.Component{
constructor(props){
super(props);
this.state={
input1Value:"",
input2Value:""
}
}
handleInput1Change(e){
const input1=e.target.value;
let input2=input1-;
this.setState({
input1Value:input1,
input2Value:input2
});
}
handleInput2Change(e){
const input2=e.target.value;
let input1=input2- + ;
this.setState({
input1Value:input1,
input2Value:input2
});
}
render(){
return (
<div>
输入框1：
<Input1 value={this.state.input1Value} onChange={this.handleInput1Change.bind(this)} />
输入框2：
<Input2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)} />
</div>
);
}
}
class Input1 extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
class Input2 extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
ReactDOM.render(
<Form1 />,
document.getElementById('root')
);
