使用React中的useContext()函数

2 年 ago

清, 宇

1 minute

useContext是什么意思？

这是一个钩子，可以将属性直接传递给想要传递值的子组件。

如果要将值传递给子组件在孙组件中使用，可以使用useContext直接传递值，避免了通过父组件传递给子组件再传递给孙组件的操作。

オブジェクト / コンポーネント説明ContextオブジェクトReact.createContext()の戻り値ProviderコンポーネントContextオブジェクトが保持しているコンポーネントConsumerコンポーネントuseContext()を利用することで、Contextオブジェクトから値を取得できる

上下文对象

const ContextObj = React.createContext();

又，或者，

import React, { createContext } from 'react';

const ContextObj = createContext();

供应商组件

当您使用Provider进行包装时，您可以在包含包装的组件树中引用value的值。

<ContextObj.Provider
 value={ツリー内で共有可能なコンテキストオブジェクトの値}
>
 <Consumer />
</ContextObj.Provider>

在导入时，使用`useContext`进行加载。

import React, { useContext } from 'react';

const コンテキストオブジェクトの値 = useContext(コンテキストオブジェクト);

使用useContext的方法

import React, { createContext, useContext } from 'react';

const ContextObj = createContext();

const Consumer = () => {
  const message = useContext(ContextObj);
  console.log(message);

  return <p>{message}</p>;
};

const message = 'React useContext';

export default function App() {
  return (
    <>
      <ContextObj.Provider value={message}>
        <Consumer />
      </ContextObj.Provider>
    </>
  );
};

使用useContext从Context对象中获取值，并将其存储在变量message中。

const message = useContext(ContextObj);

消息将在Provider组件中以value属性指定的值接收。

const message = 'React useContext';

export default function App() {
  return (
    <>
      <ContextObj.Provider value={message}>
        <Consumer />
      </ContextObj.Provider>
    </>
  );
};

我认为屏幕上会显示”React useContext”。

我想试试把文件进行分割的情况。