你可以使用 React Hooks 将状态传递给子组件吗？答案

【问题标题】：Can you pass down state to child components with React Hooks?你可以使用 React Hooks 将状态传递给子组件吗？
【发布时间】：2019-06-13 03:38:39
【问题描述】：

我正在尝试在 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;

【问题讨论】：

searchData 没有什么特别之处。它只是一种状态。如果你想通过setSearchData 你也需要通过它
但是当我将 setSearchData 向下传递时，如何使用它作为一个函数，这样我就可以更新父状态或者这是不可能的
有可能.. 你直接称它为props.setSearchData(<put anything here>)
这是可行的，因为 JavaScript 通过引用传递对象。需要指出的是：如果你传递了setSearchData，你甚至不需要传递searchData，因为它是作为回调函数参数给出的。

标签： reactjs react-hooks

【解决方案1】：

是的，就传递 props 而言，与 React Hooks 的使用没有区别。在您提供的 sn-p 中，只需将 setSearchData 作为道具传递给 PostContainer。

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

【讨论】：

【解决方案2】：

是的，绝对可以。事实上，React 文档可以说是“提升状态”。

如果组件之间存在共享状态，您需要将其提升到最近的祖先。

一般的概念是 props 向下传递， state 向上传递。

但是，这可能会变得混乱。如果你正在处理一个更大的项目，我会推荐使用 Redux。

你可以将 state 作为 props 传递，但是如果你想让子组件改变状态，那么你可以将 setter 从 useState 直接传递给子组件。

下面是同样的例子：

<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 使用标量值

【讨论】：