React组件的通讯

组件通讯的介绍

组件props

// 在父组件传的值
<InfoClass name="张三"></InfoClass>
<InfoFunction name="李四"></InfoFunction>
// 类组件
class Info_Class extends React.Component {
	// 推荐使用props作为constructor的参数！！
    constructor(props) {
        super(props)
    }
    render () {
        return (
            <div>
                {this.props.name}
            </div>
        )
    }
}
// 函数组件
function Info_Class (props) {
    return (
        <div>
            {props.name}
        </div>
    )
}

组件通讯的三种方式

Context

class Context extends React.Component {
    render () {
        return (
            <themeContext.Provider value={theme}>
                <div>
                    <Context1></Context1>
                </div>
            </themeContext.Provider>
        )
    }
}

<themeContext.Consumer>{data => console.log(data)}</themeContext.Consumer>

props深入

// 父组件
class Context extends React.Component {
    render () {
        return (
             <div>
                    <Context1>
                        <p>123</p>
                    </Context1>
                </div>
        )
    }
}
// 组件就能获取到 <p>123</p> 子标签
class Context extends React.Component {
    constructor(props) {
        super(props)
        console.log(props.children )
    }
    render () {
        console.log(this.props.children )
        return (
            <div>
                <Context2>
                </Context2>
            </div>
        )
    }
}

// 2、导入prop-types
import PropTypes from "prop-types"
function Child (props) {
    return (
        <div>

        </div>
    )
}
3、使用
Child.propTypes = {
    list: PropTypes.array
}

function Child (props) {
    console.log(props)
    return (
        <div>

        </div>
    )
}

Child.defaultProps = {
    page: 10
}