react中的context和children

最新推荐文章于 2024-11-10 09:45:00 发布

晗草coder

最新推荐文章于 2024-11-10 09:45:00 发布

阅读量500

点赞数

文章标签： reactjs html5 javascript es6 typescript

本文链接：https://blog.youkuaiyun.com/monthover/article/details/104621326

版权

本文深入讲解React中的Context API，介绍其如何解决组件间状态传递的问题，通过实例演示Context的创建、使用及数据传递过程，适合React开发者进阶学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

context

React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，n个组件通信需要挨个props麻烦，难以维护，Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
所以context的作用就是在某个父组件中定义一个全局状态，这个状态可以在该父组件下的所有子组件中跨级传递共享
方法：

步骤1：创建context对象 const {Provider,Consumer} = React.createContext()
步骤2：通过Provider组件传递数据内容
步骤3：通过Consumer使用数据 { 接受数据的变量名称 => (内容)

<body>
<div id="app">
</div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 创建一个 Context 对象
const {Provider, Consumer} = React.createContext()
//1.定义
class Father extends React.Component
{
    render() {
        return <Provider value={{data1:111, data2:222}}>
            <fieldset>
                <legend>Father</legend>
                <Middle/>
            </fieldset>
        </Provider>
    }
}
class Middle extends React.Component
{
    render() {
        return <fieldset>
            <legend>Middle</legend>    
            <Son />
        </fieldset>
    }
}
class Son extends React.Component
{
    render() {
        return <Consumer>
            {value => <fieldset>
                <legend>Son</legend> 
                <p>{value.data1}</p>  
                <p>{value.data2}</p>
            </fieldset>}
        </Consumer>
    }
}
//2.渲染
ReactDOM.render(<Father />, document.querySelector("#app"))
</script>
</body>

children

在react中this.props.键中传递一条数据而this.props.children中传递的是组件中的内容如：弹框就可以这么来
方法：

调用组件：<组件名>内容</组件名> 获取组件内容：this.props.children （另外写法 <组件名
children=数据></组件名>）

// 1. 定义组件
class Modal extends React.Component
{
    render()
    {
        return (
            <fieldset>
                <legend>自定义遮罩框</legend>
                {this.props.msg}

                {/* 获取组件中的内容 props.children */}

                {this.props.children}
            </fieldset>
        )
    }
}
// 2. 渲染组件
ReactDOM.render(<div>
    <Modal msg="<p style='color:green'>删除成功</p>">
        <h1 style={{color:'green'}}>删除成功</h1>
        <p>南京</p>
    </Modal>
    <Modal msg="确定删除吗？">
        <p>北京</p>
    </Modal>
</div>, document.querySelector('#app'))