react 组件传值

1、父组件向子组件传值

通过props实现
父组件parent

import React from "react"
import Child from "./Children"
 
class Comment extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        	arr: [{
                "userName": "name01",
                "text": "text01"
            }]
        }
    }
 
    render() {
        return (
            <div>
            	# state里的arr传递到子组件
                <Child arr={this.state.arr}> 
                </Child>
            </div>
        )
    }
}
 
export default Comment;

子组件children

import React from "react"
 
class ComentList extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div className="list">
                <ul>
                    {
                    	# 通过this.props.arr接收父组件传来的arr，然后进行循环
                        this.props.arr.map(item => { 
                            return (
                                <li key={item.userName}>
                                    文本:{item.text}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}
 
export default ComentList;

2、子组件向父组件传值

通过子组件和父组件绑定函数实现（.bind）
父组件parent

import React from "react"
import Child from "./Children"
 
class Comment extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            parentText: "this is parent text",
            arr: [{
                "userName": "name01",
                "text": "text01"
            }]
        }
    }
 
    methodParent(data) {
        this.setState({
        	 # 把父组件中的parentText替换为子组件传递的值
            parentText: data
        },() =>{
        	# setState是异步操作，用箭头函数实现即时更新
           console.log(this.state.parentText);
        });
    }
 
    render() {
        return (
            <div>
                # 通过绑定事件bind(this)进行值的运算，因为事件传递时this的指向已经改变
                <Child arr={this.state.arr} methodName={this.mathodParent.bind(this)}>
                </Child>
                <p>
                    text is {this.state.parentText}
                </p>
            </div>
        )
    }
}
 
export default Comment; 

子组件children

import React from "react"
 
class ComentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            childText: "this is child text"
        })
    }
    clickFn(data) {
    	# 把值传给父组件中定义的事件
        this.props.methodName(data)
    }
    render() {
        return (
            <div className="list">
                <ul>
                    {
                        this.props.arr.map(item => {
                            return (
                                <li key={item.userName}>
                                    文本:{item.text}
                                </li>
                            )
                        })
                    }
                </ul>
                # 通过事件进行传值，如果想得到event，可以在参数最后加一个event，
                <button onClick={this.clickFn.bind(this, this.state.childText)}>
                    click me
                </button>
            </div>
        )
    }
}
 
export default ComentList;    

3、其他组件传值

使用redux实现

参考：
https://www.cnblogs.com/mmykdbc/p/9505572.html
https://www.jianshu.com/p/cf0fcc2c53fc