如何將組件的值傳遞給另一個組件

Question

我正在創建一個項目，我需要在其中獲取組件 state 值的值到另一個組件。

我怎樣才能得到價值？

信息

1. 兩者都是功能組件。
2. 我需要將數據從 A（狀態）發送到 B（狀態）。
3. state 數據是從react dropdown中設置的。這是一個按鈕。
4. 我不使用Link or Route to A下拉列表，這就是為什么我無法使用useParams()獲取它
5. 我需要在B組件中設置值，它將使用傳遞的語言獲取數據。
6. 我已經導入了所有需要的東西並且沒有任何警告和錯誤。

A組份代號

1. 將此language的值 state 發送到B

const A = () => {
    const [language, setLanguage] = useState('en');
    
    return (
        <Navbar expand="xl" bg='light' expand={false}>
            <Container>
                <DropdownButton id="dropdown-basic-button" title={<MdOutlineLanguage />}>
                    <Dropdown.Item as="button" onClick={() => setLanguage('en')}>English</Dropdown.Item>
                    <Dropdown.Item as="button" onClick={() => setLanguage('ar')}>العربية</Dropdown.Item>
                    <Dropdown.Item as="button" onClick={() => setLanguage('bn')}>বাংলা</Dropdown.Item>
                </DropdownButton>
            </Container>
        </Navbar>
    )
};

export default A

B組份代號

1. 我需要在此處獲取A state 值並將其設置為B state。然后傳遞給useGetDataQuery並獲取數據。

const B = () => {
    let [language, setLanguage] = useState('en')
    const { data } = useGetDataQuery({language })
    
    return (
        <>
            
        </>
    )
}
export default B

Redux科

我正在使用readux & @reduxjs/toolkit來存儲獲取數據。 我可以將我的language數據存儲到這里嗎？ 比起如何從我的組件的任何地方到達。

1. react-rotuer-dom v6

export default configureStore({
    reducer: {
        [dataOne.reducerPath]: dataOne.reducer,
        [data2.reducerPath]: dataTwo.reducer,
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: false
        }).concat([dataOne.middleware, dataTwo.middleware]),

})

Answer 1

也許不使用useState ，您可以通過使用useContext 使用全局 state因為我認為您的language將在多個地方用作請求正文，當然要編輯 state 值，您可以將它與useReducer結合使用。

// UPDATE

工作代碼： https://codesandbox.io/s/sleepy-monad-21wnc

MyContext

import { useReducer, useContext, createContext } from "react";

const initialValue = {
  language: "id"
  // other: "value",
};

const AppContext = createContext(initialValue);

const AppReducer = (state, action) => {
  switch (action.type) {
    case "CHANGE_LANGUAGE":
      return {
        ...state,
        ...action.payload
      };
    default:
      return state;
  }
};

const MyContext = ({ children }) => {
  const [state, dispatch] = useReducer(AppReducer, initialValue);
  return (
    <AppContext.Provider value={[state, dispatch]}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);
export default MyContext;

這是稍后在App.js中使用的context和reducer組件

App.js

import A from "./A";
import B from "./B";
import MyContext from "./MyContext";
import "./styles.css";

export default function App() {
  return (
    <MyContext>
      <div className="App">
        <A />
        <B />
      </div>
    </MyContext>
  );
}

A.js

import { useAppContext } from "./MyContext";

const A = () => {
  const [globalState, dispatch] = useAppContext();

  const onChange = (e) => {
    dispatch({
      type: "CHANGE_LANGUAGE",
      payload: {
        [e.target.name]: e.target.value
      }
    });
  };

  return (
    <>
      <p>Start Of Component A </p>
      <input value={globalState.language} name="language" onChange={onChange} />
      <p>End Of Component A </p>
    </>
  );
};

export default A;

B.js

import { useAppContext } from "./MyContext";

const B = () => {
  const [globalState, dispatch] = useAppContext();

  return (
    <>
      <p>Start Of Component B </p>
      <h2>Language Val : {globalState.language}</h2>
      <p>End Of Component B </p>
    </>
  );
};

export default B;