简单的说一下父传子（属性传值）

1.一般而言，我们用的是ES6中的class类来书写

import React, {Component} from 'react';

class Abc extends Component {
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default Abc;

2.在父组件中

import React, {Component} from 'react';
import Abc from "../to/abc";  //---<引入子文件
class App extends Component {
    constructor(props) {
        super(props);
        this.state={
            aa:"hello react"  //--->初始化
        }
    }

    render() {
        return (
            <div>
                <Abc cd={this.state.aa} ac="我是父组件给子组件传的值"> </Abc>
            </div>
        );
    }
}

export default App;

3.在子组件中（abc.js）

import React, {Component} from 'react';

class Abc extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>
                <p>{this.props.ac}</p> //--->我是父组件给子组件传的值
                <p>{this.props.cd}</p>   //--->hello react
            </div>
        );
    }
}

export default Abc;

子组件给父组件传递值

1.要先在子组件中定义一个方法，通过方法的参数，将值传递给父组件

import React, {Component} from 'react';

class Abc extends Component {
    constructor(props) {
        super(props);

    }
    tag(){
        this.props.tag1("我是子组件传递给父组件的值");//--->tag1是父组件的变量名
    }
    render() {
        return (
            <div>
                <p>{this.props.ac}</p>
                <p>{this.props.cd}</p>
                                          {/* bind是改变this的指向，也可以用箭头函数改变*/}
                <button onClick={this.tag.bind(this)}>点击切换父组件的内容</button>
            </div>
        );
    }
}

export default Abc;

2.在父组件中

import React, {Component} from 'react';
import To from "../to/to";
import List from "../to/list";
import Abc from "../to/abc";
class App extends Component {
 constructor(props) {
     super(props);
     this.state={
         aa:"hello react"
     }
 }
 ch(q){
     alert(q);//--->q就是子组件传递过来的内容
     this.setState({aa:q});//--->在更新当前的aa的内容
 }
 render() {
     return (
         <div>
             <Abc cd={this.state.aa} ac="我是父组件给子组件传的值"
             tag1={this.ch.bind(this)}> </Abc>
         </div>
     );
 }
}

export default App;

兄弟传值

就是把父传子，子传父结合到了一起，通过子组件（定义一个方法，通过方法的参数），将值传递到父组件，在通过父组件（属性传值），传递给另一个子组件

不过后面会有redux,react-redux传值，会方便很多