如何在React中使用TypeScript交付props？

vuktfyat 于 2023-06-07 发布在 TypeScript

关注(0)|答案(1)|浏览(145)

我的数据在materials.json中

[
    {
        "title": "Початок роботи",
        "body": "З самого початку React був спроектований так, щоб його можна було впроваджувати поступово. Тобто ви можете додавати так мало або так багато React-у, як вам потрібно. Скористайтеся інформацією та посиланнями цього розділу, якщо просто бажаєте відчути React на смак або додаєте трохи 'інтерактивності' до простої HTML-сторінки, чи, навіть, якщо стартуєте складний React-проект.",
        "href": "https://uk.legacy.reactjs.org/docs/getting-started.html"
    }
...

对于这些数据，我创建了类型：

type Material = {
    title: string;
    body: string;
    href: string;
};

export default Material

然后，我创建了父组件：

import Articles from '../../components/Articles';
import './main.css';
import materials from './../../data/materials.json';

const Main = () => {
    return (
        <main className='main'>
        <Articles data = {materials} />
        </main>
    );
};

export default Main;

对于最后一个，我创建了一个子组件：

import Material from "../types/material"

const Articles = (props: Material) => {

    console.log(props)
    return (
      <div>Article</div>
    
  )
}

export default Articles

但在主（父）组件中，下一行中存在错误

<Articles **data** = {materials} />

错误在于
中文（简体）
如何解决？

typescript

来源：https://stackoverflow.com/questions/76415939/how-to-deliver-props-in-react-with-typescript

1条答案

按热度按时间

vq8itlhq1#

组件定义：

import * as React from "react";

type Material = {
   title: string;
   body: string;
   href: string;
}
   
   const Articles:React.FC<Material> = (props) => {
      console.log(props)
      return (
         <div>Article
            <p>{props.title}</p>
         </div>
      )
   }

   export default Articles

现在，在父组件中，您可以轻松地将props传递给子组件**，假设json是一个Materials数组**，代码可以写成

import Articles from '../../components/Articles';
import './main.css';
import materials from './../../data/materials.json';

const Main = () => {

    return (
        <main className='main'>
        {materials.map((item, i) => 
            <Articles 
               title={item.title}
               body={item.body}
               href={item.href}
               key={i}
            />
        )}
        </main>
    );
};

export default Main;

赞(0）回复(0）举报 2023-06-07

我来回答

如何在React中使用TypeScript交付props？

1条答案

相关问题

热门标签

最新问答