快捷導(dǎo)航

React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞

更新時間：2024年01月25日 10:14:32 作者：a堅強(qiáng)的泡沫

這篇文章給大家介紹了React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧

1、創(chuàng)建context

ContextProvider.tsx:

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

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

// 創(chuàng)建一個context
export const Context = React.createContext<ContextState>({
  activeIndex: 0,
  setActiveIndex: () => {},
});

const ContextProvider: React.FC<
  { children: React.ReactNode } & {
    viewRef: React.MutableRefObject<null>;
  }
> = ({ children, viewRef }) => {
  // 使用useState監(jiān)聽狀態(tài)變更
  const [activeIndex, setActiveIndex] = useState(0);

  const value = useMemo(() => {
    return {
      viewRef,
      activeIndex,
      setActiveIndex, // 通過context來更新對象和數(shù)據(jù)，則可以使用state的方式將其傳遞下去
    };
  }, [showQuizsAnswer, shotViewRef, viewRef]);

  // Context提供一個Provider組件，并將自組件包裹起來，這里的props名稱必須是value
  return <Context.Provider value={value}>{children}</Context.Provider>;
};

export default ContextProvider;

要更新 context，請將其與 state 結(jié)合。在父組件中聲明一個狀態(tài)變量，并將當(dāng)前狀態(tài)作為 context value 傳遞給 provider。

上述寫法可以參考 useContext。

2、提供context

App.tsx:

import ContextProvider from './ContextProvider';

function App() {
  // 下面這種寫法是無效的，不能在父組件中使用
  // const {  setActiveIndex, activeIndex } = React.useContext(context);
  
  return (
    // 使用provider包裹，之后所有的子組件都可以獲取得到距離他最近的provider的數(shù)據(jù)
    <ContextProvider viewRef={viewRef}>
      <ChildComponent onChange={handleChange} />
    </ContextProvider>
  );
}

注意：在這里App.tsx里面不能消費(fèi)context，因為App.tsx屬于父組件。

useContext() 總是在調(diào)用它的組件上面尋找最近的 provider。它向上搜索，不考慮調(diào)用 useContext() 的組件中的 provider。所以上面注釋掉的寫法是錯誤的。

3、使用context

ChildComponent.txs:

function ChildComponent() {
  // 使用useContext鉤子訪問Context的值
  const { setActiveIndex, activeIndex } = React.useContext(MyContext);

  // 在子組件中調(diào)用setActiveIndex函數(shù)來更改value值
  const handleInputChange = (newValue) => {
    setActiveIndex(newValue);
  };

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

到此這篇關(guān)于React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞的文章就介紹到這了,更多相關(guān)React context組件數(shù)據(jù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: