react 组件通信：

父传子：

父组件：

import React from 'react';
import './App.css';
//引入子组件
import Nav from "./components/Nav";
export default  class App extends React.Component{
    render () {
        return (
            <div className="App">
                <Nav title={'父亲传递的值'}/>  {/*父传子*/}
            </div>
        );
    }

}

子组件：

import React from "react";

 export default  class Nav extends React.Component {
    constructor(props) {
        super(props);  ///接收和传递数据  传递的数据会在props里
        this.state = {  //保持组件的状态
            title: ''
        }
    }
    render() {
        return (
            <div>
                <div>{this.state.title}</div>
            </div>
        )
    }
    //完成挂载
    componentDidMount() {
        this.setState({
            title: this.props.title
        })
    }
}

子传父：

子组件：

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>
        )
    }
}

 

父组件：

import React from 'react';
import './App.css';

//子组件1
import Input from "./components/Input";
//子组件2
import Nav from "./components/Nav";

 export default  class App extends React.Component {
    constructor(props) {
        super(props);
        // 先给 msg 一个空值
        this.state = {
            msg: ''
        }
    }
    // 声明一个方法用来接收Son1传来的值
    inputVal=(msg)=> {
        // 把Son1传来的值给放在父组件中
        this.setState({
            msg:msg
        });
    };

    render() {
        return (
            <div className="App">
                {/*one:子组件1 向父组件传值 引入子组件 拿到上边声明的方法*/}
                <Input sendVal={this.inputVal}/>
                {/*two: 父组件向子组件传值 引入第二个子组件 并声明一个属性iptVal  把Son1传来的值传过去*/}
                <Nav iptVal = {this.state.msg}/>
                <div>{this.state.msg}</div>
            </div>
        );
    }

}

兄弟组件传值

父组件：

import React from 'react';
import './App.css';

//子组件1
import Input from "./components/Input";
//子组件2
import Nav from "./components/Nav";

 export default class App extends React.Component {
    constructor(props) {
        super(props);
        // 先给 msg 一个空值
        this.state = {
            msg: ''
        }
    }
    // 声明一个方法用来接收Son1传来的值
    inputVal=(msg)=> {
        // 把Son1传来的值给放在父组件中
        this.setState({
            msg:msg
        });
    };

    render() {
        return (
            <div className="App">
                {/*one:子组件1 向父组件传值 引入子组件 拿到上边声明的方法*/}
                <Input sendVal={this.inputVal}/>
                {/*two: 父组件向子组件传值 引入第二个子组件 并声明一个属性iptVal  把Son1传来的值传过去*/}
                <Nav iptVal = {this.state.msg}/>
                <div>{this.state.msg}</div>
            </div>
        );
    }

}

 

子组件1：

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>
        )
    }
}

 

子组件2：

import React from "react";

 export default class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            iptVal:''
        }
    }

    render() {
        return (
            <div>
                <div>{this.state.iptVal}</div>
            </div>
        )
    }

    componentDidMount() {
        this.setState({
            //把从子组件传递过来的值 赋给 input
            iptVal:this.props.iptVal
        })
    }
}