如何使用TypeScript傳遞組件傳播道具？

編輯：我過于關注 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;

uj5u.com熱心網友回復：

您正在嘗試data在僅支持屬性spread的地方（JSX 元素運算式的 props 串列）對陣列 ( )使用 spread 。雖然陣列是物件，但它們的屬性名稱是"0"等等，不是"userId"等等，因此與組件期望的道具不匹配。

你在評論中說你并沒有特別想做任何事情，只是想看看如何做你正在做的事情。你<CustomComponent {...data}>就好了，如果 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。

為此，您必須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>;
};

標籤：javascript 反应 打字稿

上一篇：不同介面型別

下一篇：如何匯入同名路徑不同的組件？