更改通用功能子组件的状态

Question

在我的应用程序中，我使用了通用的 Tabs 功能组件：

export default function Tabs() {
    const [currentTabIndex, setCurrentTabIndex] = useState(0);

    [...]
}

现在，在我的 BookingPage 中，我需要更改此 Tabs 组件的 currentTabIndex，取决于 Redux 商店：

export default function BookingPage()
    const userCreatedBooking = useSelector([...]); // whenever this value change, I want
                                                   // to invoke Tabs.setCurrentIndex 

    return (
     <>
         <Tabs tabs=[SubPage1, SubPage2]/>
     <>

实现上述目标的简洁方法是什么？谢谢;)

Answer 1

一个干净的方法是 connect 你的组件到 redux，redux 值将在组件的 props 中。

如果你想在每次更改 redux 中的值时使用 setCurrentTabIndex，你可以使用 useEffect

useEffect 的例子在这个 post

的答案中

编辑

我可以给你举个例子

import React, {useState, useEffect} from 'react'

export default function Tabs(props) {
    const [currentTabIndex, setCurrentTabIndex] = useState(0);
    
    useEffect(() => {
      // Runs ONCE after initial rendering
      setCurrentTabIndex(props.value)
    }, [props.value]); // Will only run if props.value change
    [...]
}

export default function BookingPage() {
    const userCreatedBooking = useSelector([...]);

    return (
     <>
         <Tabs 
         value={userCreatedBooking} // or any value in your redux
         tabs=[SubPage1, SubPage2]
         />
     <>
     )
}

有关 useEffect and how to connect your component to redux

的更多信息

更改通用功能子组件的状态

Changing state of generic functional child component

javascript

components

reactjs

redux