React的组件间通信
一、React的单向数据流
React是单向数据流，数据主要从父节点传递到子节点（通过props）。
如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。这通常被称为“自顶向下”或“单向”数据流。任何状态始终由某个特定组件所有，并且从该状态导出的任何数据或UI只能影响树中“下方”的组件。
二、React的组件间通信
1）父级-》子级
比较简单，直接调用时设置props值
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>菜鸟教程 React 实例</title>
6 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
7 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
8 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
9 </head>
10 <body>
11 <div id="example"></div>
12 <script type="text/babel">
13 var WebSite = React.createClass({
14 getInitialState: function() {
15 return {
16 name: "菜鸟教程",
17 site: "http://www.runoob.com"
18 };
19 },
20
21 render: function() {
22 return (
23 <div>
24 <Name name={this.state.name} />
25 <Link site={this.state.site} />
26 </div>
27 );
28 }
29 });
30
31 var Name = React.createClass({
32 render: function() {
33 return (
34 <h1>{this.props.name}</h1>
35 );
36 }
37 });
38
39 var Link = React.createClass({
40 render: function() {
41 return (
42 <a href={this.props.site}>
43 {this.props.site}
44 </a>
45 );
46 }
47 });
48
49 ReactDOM.render(
50 <WebSite />,
51 document.getElementById('example')
52 );
53 </script>
54 </body>
55 </html>
2）子级-》父级
用回调函数，传参
1 class Father extends React.Component{ 2 constructor(props){
3 super(props);
4 this.state={
5 inputValue:""
6 }
7 }
8 //在回调函数里处理子级的输入
9 handleInputChange(e){
10 this.setState({
11 inputValue:e.target.value
12 });
13 }
14 render(){
15 return (
16 <div>
17 <span>输入为{this.state.inputValue}</span>
18 <Child onChange={this.handleInput2Change.bind(this)} />
19 </div>
20 );
21 }
22 }
23 //通过onChange={this.props.onChange}，子级输入事件发生时，调用的是父级传入的回调函数
24 class Child extends React.Component{
25 render(){
26 return (
27 <div>
28 <input value={this.props.value} onChange={this.props.onChange}/>
29 </div>
30 );
31 }
32 }
33 ReactDOM.render(
34 <Father />,
35 document.getElementById('root')
36 );
3）兄弟《-》兄弟：
按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
下面实现一个组件通信的例子，一个输入框的数据改变，另一个输入框数据会跟随同时改变。
1 class Form1 extends React.Component{ 2 constructor(props){
3 super(props);
4 this.state={
5 input1Value:"",
6 input2Value:""
7 }
8 }
9 handleInput1Change(e){
10 const input1=e.target.value;
11 let input2=input1-1;
12 this.setState({
13 input1Value:input1,
14 input2Value:input2
15 });
16 }
17 handleInput2Change(e){
18 const input2=e.target.value;
19 let input1=input2-0 + 1;
20 this.setState({
21 input1Value:input1,
22 input2Value:input2
23 });
24 }
25 render(){
26 return (
27 <div>
28 输入框1：
29 <Input1 value={this.state.input1Value} onChange={this.handleInput1Change.bind(this)} />
30 输入框2：
31 <Input2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)} />
32 </div>
33 );
34 }
35 }
36 class Input1 extends React.Component{
37 render(){
38 return (
39 <div>
40 <input value={this.props.value} onChange={this.props.onChange}/>
41 </div>
42 );
43 }
44 }
45 class Input2 extends React.Component{
46 render(){
47 return (
48 <div>
49 <input value={this.props.value} onChange={this.props.onChange}/>
50 </div>
51 );
52 }
53 }
54 ReactDOM.render(
55 <Form1 />,
56 document.getElementById('root')
57 );
以上是 React的组件间通信 的全部内容， 来源链接： utcz.com/z/382796.html
