📌  相关文章
📜  反应中的上下文 Api - Javascript (1)

📅  最后修改于: 2023-12-03 15:07:23.374000             🧑  作者: Mango

反应中的上下文 Api - Javascript

在 React 中，上下文（Context）提供了一种在组件树中共享数据的方法，可以避免将数据一层层地传递到每个组件中。而上下文 API 则提供了在组件间使用上下文的方法。

创建上下文

首先，我们需要使用 React.createContext() 函数创建一个上下文对象。

const MyContext = React.createContext(defaultValue);

该方法将返回一个包含 Provider 和 Consumer 组件的对象。

Provider

定义共享数据的组件。它可以接收 value 属性，用于传递数据。

<MyContext.Provider value={/* 共享的数据 */}>
  ...
</MyContext.Provider>
Consumer

消费共享数据的组件。它使用 MyContext.Consumer，一个函数作为子组件，该函数接收共享数据作为其参数。

<MyContext.Consumer>
  {value => /* 渲染共享数据 */}
</MyContext.Consumer>
在组件间传递数据

首先，在 App 组件中创建上下文：

const UserContext = React.createContext();

然后，使用 UserContext.Provider 在 App 组件中将共享数据传递给 Profile 和 Navbar 组件：

function App() {
  const [user, setUser] = React.useState({ name: 'Bob', email: 'bob@example.com' });

  return (
    <UserContext.Provider value={user}>
      <div className="App">
        <Navbar />
        <Profile />
      </div>
    </UserContext.Provider>
  );
}

在 Profile 和 Navbar 组件中，使用 UserContext.Consumer 来访问共享数据：

function Navbar() {
  return (
    <UserContext.Consumer>
      {(user) => (
        <nav>
          <ul>
            <li>{user.name}</li>
            <li>{user.email}</li>
          </ul>
        </nav>
      )}
    </UserContext.Consumer>
  );
}

function Profile() {
  return (
    <UserContext.Consumer>
      {(user) => (
        <div>
          <h1>{user.name}'s Profile</h1>
          <p>Email: {user.email}</p>
        </div>
      )}
    </UserContext.Consumer>
  );
}
参考链接