react中Context的基本使用

最新推荐文章于 2024-06-16 22:34:39 发布

dong.wang

最新推荐文章于 2024-06-16 22:34:39 发布

阅读量261

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/wangdong9395/article/details/109109995

版权

react 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

这篇博客展示了如何在React应用中使用Context API来实现组件间的通信。通过创建Provider和Consumer，实现了从顶层组件向子组件传递状态值，简化了状态管理。示例包括了App、Node、SubNode和Child组件的层级结构，以及Consumer组件接收并显示从Provider传递的数据。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
      // 创建context得到两个组件
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
  render() {
    return (
      <Provider value="pink">
        <div className="app">
          <Node />
        </div>
      </Provider>
    )
  }
}

const Node = props => {
  return (
    <div className="node">
      <SubNode />
    </div>
  )
}

const SubNode = props => {
  return (
    <div className="subnode">
      <Child />
    </div>
  )
}

const Child = props => {
  return (
    <div className="child">
      <Consumer>{data => <span>我是子节点 -- {data}</span>}</Consumer>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
    </script>
</body>

</html>