reactjs - 您可以使用 React Hooks 将状态传递给子组件吗？

Question

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

Answer 1

是的，就传递 props 而言，与 React Hooks 的使用没有区别。在您提供的代码片段中，只需将 setSearchData 作为 prop 传递给 PostContainer。

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