react组件之间通信

组件通信与数据流

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

• 父级向子级通信
• 子级向父级通信

import React, { Component } from 'react';

export default class Dl extends Component {

    state = {
        isOpen: true
    }
    render() {
        console.log(this.props);
        let { title, list } = this.props.value;
        let { isOpen } = this.state;
        return ( <
                div className = { "friend-group" + (isOpen ? "expanded" : "") } >
                <
                dt onClick = {
                    () => {
                        this.setState({ isOpen: !isOpen })
                        console.log(this.state)
                    }

                } > { title } < /dt>  {
                list.map((item, index) => {
                    return <dd key = { index } > { item.name } < /dd>
                })
            } <
            /
        div >
    )
}
}