时间戳

首页 > 解决方案 > 你可以使用 React Hooks 将状态传递给子组件吗？

reactjs - 你可以使用 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;

标签： reactjsreact-hooks

解决方案

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

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

推荐阅读