【react】使用context进行跨级组件数据传递

这篇具有很好参考价值的文章主要介绍了【react】使用context进行跨级组件数据传递。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

官方文档：使用 Context 深层传递参数、useContext

应用：无需为每层组件手动添加 props，能狗在组件树间进行数据传递的方法。

1、创建context

ContextProvider.tsx:

import React, { useMemo, useState } from 'react';

export interface ContextState {
  viewRef?: React.MutableRefObject<null>;
  activeIndex: number;
  setActiveIndex: (data: number) => void;
}

// 创建一个context
export const Context = React.createContext<ContextState>({
  activeIndex: 0,
  setActiveIndex: () => {},
});

const ContextProvider: React.FC<
  { children: React.ReactNode } & {
    viewRef: React.MutableRefObject<null>;
  }
> = ({ children, viewRef }) => {
  // 使用useState监听状态变更
  const [activeIndex, setActiveIndex] = useState(0);

  const value = useMemo(() => {
    return {
      viewRef,
      activeIndex,
      setActiveIndex, // 通过context来更新对象和数据，则可以使用state的方式将其传递下去
    };
  }, [showQuizsAnswer, shotViewRef, viewRef]);

  // Context提供一个Provider组件，并将自组件包裹起来，这里的props名称必须是value
  return <Context.Provider value={value}>{children}</Context.Provider>;
};

export default ContextProvider;

要更新 context，请将其与 state 结合。在父组件中声明一个状态变量，并将当前状态作为 context value 传递给 provider。

上述写法可以参考 useContext。

2、提供context

App.tsx:

import ContextProvider from './ContextProvider';

function App() {
  // 下面这种写法是无效的，不能在父组件中使用
  // const {  setActiveIndex, activeIndex } = React.useContext(context);
  
  return (
    // 使用provider包裹，之后所有的子组件都可以获取得到距离他最近的provider的数据
    <ContextProvider viewRef={viewRef}>
      <ChildComponent onChange={handleChange} />
    </ContextProvider>
  );
}

注意：在这里App.tsx里面不能消费context，因为App.tsx属于父组件。

useContext() 总是在调用它的组件上面寻找最近的 provider。它向上搜索， 不考虑调用 useContext() 的组件中的 provider。 所以上面注释掉的写法是错误的。

3、使用context

ChildComponent.txs:文章来源地址https://www.toymoban.com/news/detail-823107.html

function ChildComponent() {
  // 使用useContext钩子访问Context的值
  const { setActiveIndex, activeIndex } = React.useContext(MyContext);

  // 在子组件中调用setActiveIndex函数来更改value值
  const handleInputChange = (newValue) => {
    setActiveIndex(newValue);
  };

  return (
    <TextInput value={activeIndex} onChangeText={handleInputChange} />
  );
}