你能使用React Hooks将状态传递给子组件吗？

Question

我正在尝试使用React Hooks重写一些代码，我想知道，在这个例子中传递searchData时...现在会有访问searchData和setSearchData的权限吗？我对React Hooks中状态的传递方式感到困惑。

结果:

我正在尝试使用React Hooks重写一些代码，我想知道，在这个例子中传递searchData时...现在会有访问searchData和setSearchData的权限吗？我对React Hooks中状态的传递方式感到困惑。

import React, { useState, useEffect } from "react";
import SearchBarContainer from "../SearchBar/SearchBarContainer";
import PostContainer from "./PostContainer";



function PostPage(props) {
   const [searchData, setSearchData] = useState([...props.data]);
   const [addLike, setAddLike] = useState([]);

 useEffect(() => {
 setAddLike({ addLike: Array(props.data.length).fill(false) });
  });

return (
  <div>
    <SearchBarContainer data={props.data} searchData={searchData} />

    <div css={parentPostContainer}>
      {searchData.map((dataOnMap, index) => {
        return (
          <PostContainer
            data={dataOnMap}
            addLike={addLike[index]}
            searchData={searchData}
          />
        );
      })}
     </div>
   </div>
 );
}

export default PostPage;

- Bradley Ball

---

searchData 没有什么特别的，它只是一个状态而已。如果你想传递 setSearchData 的话，你也需要将其一并传递。 - azium

但是当我将 setSearchData 传递下去时，如何将其用作函数以便我可以更新父状态，或者这不可能吗？ - Bradley Ball

可以的，你只需要调用 props.setSearchData(<放任何东西>) 即可。 - azium

这是因为JavaScript通过引用传递对象。只是要指出：如果您传递setSearchData，则甚至不需要传递searchData，因为它作为回调函数参数给出。 - Irfanullah Jan

Answer 1

就传递属性而言，使用React Hooks没有任何区别。在您提供的片段中，只需将 setSearchData 作为属性传递给 PostContainer 即可。

<PostContainer
  data={dataOnMap}
  addLike={addLike[index]}
  searchData={searchData}
  setSearchData={setSearchData}
/>

- Deniz Aslan

Answer 2

当然可以。实际上，React文档中谈到了所谓的“状态提升”。

如果组件之间存在共享状态，并且需要将其提升到它们最近的祖先组件，则需要使用该技术。

总体概念是props向下传递，而state向上传递。

然而，这可能会变得混乱。如果您正在处理一个较大的项目，建议使用Redux。

您可以将状态作为props传递，但是如果您希望子组件更改状态，则可以直接将useState的setter传递给子组件。

以下是相同的示例：

<PostContainer
   data={dataOnMap}
   addLike={addLike[index]}
   searchData={searchData}
   setSearchData={setSearchData}
   setAddLike={setAddLike}
/>

Or another solution

const LikeManager = {
  addLike: setAddLike,
  data: {
     //some data
  }  
}

<PostContainer
   data={dataOnMap}
   likeManager: {LikeManager}
/>

我知道这不是问题的一部分，但我建议在可能的情况下使用标量值来设置useState。

- ptmp_727