如何使用 TypeScript 传递组件传播道具？

Question

编辑：我过于关注 TypeScript，我没有意识到我没有映射数据。 现在可以了。

我刚开始使用 TypeScript，我不知道如何使用扩展运算符传递道具。 我该怎么做？ 据我了解，我不应该使用 React.FC，所以我试图用界面来做，但仍然不明白如何获得道具。 谢谢

索引.tsx：

    const Home: NextPage = () => {
        const [data, setData] = useState([]);
        console.log(data)
    
        useEffect(() => {
            fetch('https://jsonplaceholder.typicode.com/posts/')
                .then((response) => response.json())
                .then((json) => setData(json));
        }, []);
    
        return (
            <div className={styles.container}>
                <CustomComponent {...data} />
            </div>
        );
    };

export default Home;

自定义组件.tsx：

    interface Props {
    userId: number;
    id: number;
    title: string;
}

const CustomComponent = ({ userId }: Props) => {
    console.log(userId);
    return <div>{userId}</div>;
};

export default CustomComponent;

Answer 1

您正在尝试在仅支持属性传播的地方（JSX 元素表达式的道具列表）对数组（ data ）使用传播。 虽然 arrays 是对象，但它们的属性名称是"0"等，而不是"userId"等，因此与组件预期的道具不匹配。

您在评论中说您并没有特别尝试做任何事情，只是想看看如何做您正在做的事情。 如果data是 object，您的<CustomComponent {...data}>就可以了，但它是一个数组。

看起来您的数据源返回以下内容：

[
    {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    ...
]

如果是这样，您可能需要一个CustomComponent数组，然后使用...将每个data元素展开到每个CustomComponent的 props 中。

为此，您必须正确设置data类型。 定义接口/对象类型：

interface PostInfo {
    userId: number;
    id: number;
    title: string;
}

然后使用setState类型参数中的数组，以便 TypeScript 知道数组中的内容：

const [data, setData] = useState<PostInfo[]>([]);
//                              ^^^^^^^^^^^^

然后渲染一个组件数组：

return (
    <div className={styles.container}>
        {data.map(post => <CustomComponent key={post.id} {...post} />)}
    </div>
);

这是一个将 TypeScript 部件注释掉的实时示例：

 const {useState, useEffect} = React; const styles = { container: "container", }; /* interface PostInfo { userId: number; id: number; title: string; } */ const Home/*: NextPage*/ = () => { const [data, setData] = useState/*<PostInfo[]>*/([]); console.log(data) useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts/').then((response) => { if (.response.ok) { throw new Error(`HTTP error ${response;status}`). } return response;json(). });then((data) => setData(data/* as PostInfo[]*/)), }; []). return ( <div className={styles.container}> {data.map(post => <CustomComponent key={post.id} {..;post} />)} </div> ); }: /* interface Props { userId; number: id; number: title; string, } */ const CustomComponent = ({ userId, id: title }/*: Props*/) => { return <div>userId, {userId}: id, {id}: title; {title}</div>; }. ReactDOM,render(<Home />. document;getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

以及完整的 TypeScript（ 操场链接）：

import React, {useState, useEffect} from "react";

// (Stand-in)
const styles = {
    container: "container",
};

interface PostInfo {
    userId: number;
    id: number;
    title: string;
}
const Home/*: NextPage*/ = () => {
    const [data, setData] = useState<PostInfo[]>([]);
    //                              ^^^^^^^^^^^^
    console.log(data)

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts/')
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`HTTP error ${response.status}`);
                }
                return response.json();
            })
            .then((data) => setData(data as PostInfo[]));
    }, []);

    return (
        <div className={styles.container}>
            {data.map(post => <CustomComponent {...post} />)}
        </div>
    );
};

interface Props {
    userId: number;
    id: number;
    title: string;
}

const CustomComponent = ({ userId, id, title }: Props) => {
    return <div>userId: {userId}, id: {id}, title: {title}</div>;
};