如何管理状态以响应主从组件

Question

我希望在类似于以下的站点中构建以下功能： https ://au.indeed.com/jobs?q=no%20experience&l=Melbourne%20VIC&from=searchOnHP&vjk=6c88ada376b9317e

我的意思是，我想尝试构建两个组件。 左侧的卡片列表和右侧的信息窗格，当您单击左侧卡片时会填充信息。

管理这个的正确方法是什么？ 您会在左侧组件上使用状态并将其传递给树，还是使用 redux 并发送状态来表示信息？

Answer 1

状态在列表上方进行管理，有点像这样：

const Container = ({things}) => {
    const [selected,setSelected] = useState()

    return (
       <>
          <ThingList things={things} onSelect={setSelected}/>
          <DetailView thing={selected}/>
       </>
    )

}