如何通过接口将数组道具父级传递给子级（React Hooks）

Question

我有一个子组件（图库）需要来自其父组件（主页）的数组（帖子）。我尝试通过界面 (GalleryProps) 但它不起作用。

interface IPost {
    id: number;
    title: string;
    author: string;
    content: string;
}

interface GalleryProps {
    posts: (IPost[]) => void;
}

const Gallery: React.FC<GalleryProps> = (props) => {
    return (
        {posts={props.posts}.map(post =>.map(post =>
            <div className="postCard" key={post.id}>
                <Link className="cardLink" to ={ `/detail/${post.id}`}>
                    <div>
                        {post.title}
                    </div>
                    <div>
                        {post.author}
                    </div>
                </Link>
            </div>
        )}
    );
};

const Homepage: React.FC = () => {
    const [posts, setPosts] = useState<IPost[]>([]);
    let navigateNew = useNavigate();

    useEffect(() => {
        getPosts()
            .then(items => {
                setPosts(items)
            })
    }, []);

    return (
        <div className="containerHomepage">
                <Gallery
                    posts={posts}
                />
        </div>
    );
};

export default Homepage;

我认为问题出在 GalleryProps 中。我的数组声明有误吗？

Answer 1

如果你在 Gallery 的道具中拥有的这个数据在数组中，你可以像下面这样写

interface IPost {
    id: number;
    title: string;
    author: string;
    content: string;
}


interface GalleryProps {
  posts: IPost[];
}


const Gallery: React.FC<GalleryProps> = ({posts}) => {
  return (
        posts.map(post => {
          return (
            <div className="postCard" key={post.id}>
                <Link className="cardLink" to ={ `/detail/${post.id}`}>
                    <div>
                        {post.title}
                    </div>
                    <div>
                        {post.author}
                    </div>
                </Link>
            </div>          
          )
        })
  );
};