ReactJS：將兄弟組件數據傳遞給條件組件

Question

我有一個如下截圖的目錄結構。

從LoginComponent登錄時，我想將登錄數據傳遞給UserProfileComponent ，如果未登錄，則默認情況下將加載DefaultCompoent 。

為此，我管理了以下組件。

LandingComponent.js
export default function LandingComponent(props) {

  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userName, setUserName] = useState('')
  useEffect(() => {
    setIsLoggedIn(true)
  });

  return (
    <main>
    {
      isLoggedIn ? <UserProfileComponent setUserName={setUserName} /> : <DefaultComponent userName={userName} />
    }
      
    </main>
  )
}

DefaultComponent.js

export default function DefaultComponent(props) {
    return (
        <p>Hello User</p>
    )
}

用戶配置文件組件.js

export default function UserProfileComponent(props) {
    return (
        <p>Hello {userName}</p>
    )
}

登錄組件.js

export default function LoginComponent(props) {
    const [email, setEmail] = useState("");
    const [userPassword, setPassword] = useState("");

    const loginUser = async event => {
    event.preventDefault()
    axios.post(`{api_endpoint}/login`, data)
    .then((response) => {
        const userDetails = response.data
    })
  })

  return ( 
    <form onSubmit={loginUser}>
      <input
        value={email}
        type="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        value={userPassword}
        onChange={(e) => setPassword(e.target.value)}
        type="password"
        id="password"
        placeholder="Password"
        required
      />
      <div className="col-2">
        <input type="submit" name="" value="Login" />
      </div>
    </form>
  )
}

那么，如何使用鈎子將 login_api 響應數據從這個LoginComponent給UserProfileComponent ？

Answer 1

使用上下文 api ：

創建和導出上下文：

 export const AuthContext = React.createContext();

添加一個新的 state 並將組件包裝到pages/index.js中的上下文提供程序中：

 export default function Home() { const [userData, setUserData] = React.useState(null); return ( <React.Fragment> <Head> <title>Sample App</title> </Head> <AuthContext.Provider value={{ userData, setUserData }}> <HeaderComponent /> <LandingComponent /> </AuthContext.Provider> </React.Fragment> ); }

訪問和更新LoginComponent中的上下文：

 export default function LoginComponent(props) { const [email, setEmail] = useState(""); const [userPassword, setPassword] = useState(""); const { setUserData } = React.useContext(AuthContext); const loginUser = async event => { event.preventDefault(); axios.post(`{api_endpoint}/login`, data).then(response => { // Update the context variable setUserData(response.data); }); }; return <div />; }

訪問UserProfileComponent中的上下文：

 export default function UserProfileComponent(props) { const { userData } = React.useContext(AuthContext); if (.userData) { return "Loading..;"; } // do something with userData return <p>Hello {userName}</p>; }

如您所見，您可以使用useContext掛鈎來訪問這些值。 另一種方法是將相應的組件包裝在<AuthProvider.Consumer />標記中。

編輯：

我更新了答案並將上下文移至Home組件。

Answer 2

你可以通過2種方法解決這個問題

為您的兄弟創建一個父組件並在父組件中維護 state 並將其作為道具傳遞給其子組件
使用 state 管理工具，如反應上下文 API 或 Redux 以避免將道具傳遞給子元素（道具鑽孔）

方法一：

創建一個新組件，例如：Parent.js

export default function Parent() {
//Maintain State here
const [isLoggedIn, setIsLoggedIn] = useState(false);

return (
  <main>
   {/*Pass your state to childs as prop*/}
   <ChildComponent1 isLoggedIn={isLoggedIn} />
   <ChildComponent2 isLoggedIn={isLoggedIn} />
  </main>
);
}

方法二：

State 使用 React Context 管理 API 或 Redux

對於React Context檢查本教程： https://youtu.be/35lXWvCuM8o

對於Redux請查看本教程： https://youtu.be/CVpUuw9XSjY

ReactJS：將兄弟組件數據傳遞給條件組件

問題描述

2 個解決方案

解決方案1
1 已采納 2021-03-12 14:01:38

解決方案2
0 2021-03-15 07:33:33

ReactJS：將兄弟組件數據傳遞給條件組件

問題描述

2 個解決方案

解決方案1 1 已采納 2021-03-12 14:01:38

解決方案2 0 2021-03-15 07:33:33

解決方案1
1 已采納 2021-03-12 14:01:38

解決方案2
0 2021-03-15 07:33:33