react 组件通信：

父传子：

父组件：

 1 import React from 'react';
 2 import './App.css';
 3 //引入子组件
 4 import Nav from "./components/Nav";
 5 export default  class App extends React.Component{
 6     render () {
 7         return (
 8             <div className="App">
 9                 <Nav title={'父亲传递的值'}/>  {/*父传子*/}
10             </div>
11         );
12     }
13 
14 }

子组件：

 1 import React from "react";
 2 
 3  export default  class Nav extends React.Component {
 4     constructor(props) {
 5         super(props);  ///接收和传递数据  传递的数据会在props里
 6         this.state = {  //保持组件的状态
 7             title: ''
 8         }
 9     }
10     render() {
11         return (
12             <div>
13                 <div>{this.state.title}</div>
14             </div>
15         )
16     }
17     //完成挂载
18     componentDidMount() {
19         this.setState({
20             title: this.props.title
21         })
22     }
23 }

子传父：

子组件：

import React from "react";

 export default class Input extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                 {/*给input 事件 把输入框的值 传给父组件   sendVal*/}
                <input type="text"
                       ref="input"
                       onInput={()=>{
                           this.props.sendVal(this.refs.input.value)}}
                />
            </div>
        )
    }
}

父组件：

 1 import React from 'react';
 2 import './App.css';
 3 
 4 //子组件1
 5 import Input from "./components/Input";
 6 //子组件2
 7 import Nav from "./components/Nav";
 8 
 9  export default  class App extends React.Component {
10     constructor(props) {
11         super(props);
12         // 先给 msg 一个空值
13         this.state = {
14             msg: ''
15         }
16     }
17     // 声明一个方法用来接收Son1传来的值
18     inputVal=(msg)=> {
19         // 把Son1传来的值给放在父组件中
20         this.setState({
21             msg:msg
22         });
23     };
24 
25     render() {
26         return (
27             <div className="App">
28                 {/*one:子组件1 向父组件传值 引入子组件 拿到上边声明的方法*/}
29                 <Input sendVal={this.inputVal}/>
30                 {/*two: 父组件向子组件传值 引入第二个子组件 并声明一个属性iptVal  把Son1传来的值传过去*/}
31                 <Nav iptVal = {this.state.msg}/>
32                 <div>{this.state.msg}</div>
33             </div>
34         );
35     }
36 
37 }

兄弟组件传值

父组件：

 1 import React from 'react';
 2 import './App.css';
 3 
 4 //子组件1
 5 import Input from "./components/Input";
 6 //子组件2
 7 import Nav from "./components/Nav";
 8 
 9  export default class App extends React.Component {
10     constructor(props) {
11         super(props);
12         // 先给 msg 一个空值
13         this.state = {
14             msg: ''
15         }
16     }
17     // 声明一个方法用来接收Son1传来的值
18     inputVal=(msg)=> {
19         // 把Son1传来的值给放在父组件中
20         this.setState({
21             msg:msg
22         });
23     };
24 
25     render() {
26         return (
27             <div className="App">
28                 {/*one:子组件1 向父组件传值 引入子组件 拿到上边声明的方法*/}
29                 <Input sendVal={this.inputVal}/>
30                 {/*two: 父组件向子组件传值 引入第二个子组件 并声明一个属性iptVal  把Son1传来的值传过去*/}
31                 <Nav iptVal = {this.state.msg}/>
32                 <div>{this.state.msg}</div>
33             </div>
34         );
35     }
36 
37 }
38 
39

子组件1：

 1 import React from "react";
 2 
 3  export default class Input extends React.Component {
 4     constructor(props) {
 5         super(props);
 6     }
 7 
 8     render() {
 9         return (
10             <div>
11                  {/*给input 事件 把输入框的值 传给父组件   sendVal*/}
12                 <input type="text"
13                        ref="input"
14                        onInput={()=>{
15                            this.props.sendVal(this.refs.input.value)}}
16                 />
17             </div>
18         )
19     }
20 }
21 
22

子组件2：

 1 import React from "react";
 2 
 3  export default class Nav extends React.Component {
 4     constructor(props) {
 5         super(props);
 6         this.state={
 7             iptVal:''
 8         }
 9     }
10 
11     render() {
12         return (
13             <div>
14                 <div>{this.state.iptVal}</div>
15             </div>
16         )
17     }
18 
19     componentDidMount() {
20         this.setState({
21             //把从子组件传递过来的值 赋给 input
22             iptVal:this.props.iptVal
23         })
24     }
25 }