React使用context进行跨级组件数据传递

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;

import ContextProvider from './ContextProvider';

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

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

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

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