Reactjs 将我的循环反应组件从普通javascript重构为typescript

所以在stack overflow的帮助下，我成功地创建了我的循环，它完全满足了我在react中的需求。它是一个功能组件

现在我试图将循环重构为typescript，但不明白为什么会出现这些错误

因此，我的详细产品如下所示：

import React from "react"
import {Container, Image, Jumbotron} from "react-bootstrap"
import testPic from "../941860.png"
import {Product} from "../interfaces/Product"

export const DetailedProduct = ({product}: Product) => {
    return (
        <Container>
            <Jumbotron fluid>
                    <Image src={testPic} fluid/>
            </Jumbotron>
            <h1>{product.productName}</h1>
        </Container>
    )
}

export const DetailedProduct = ({product}) => {
return ( <h1>{product.price}<h1/> )
}

<DetailedProduct product={product}/>

从“React”导入React
从“react bootstrap”导入{Container，Image，Jumbotron}
从“./941860.png”导入testPic
从“./接口/产品”导入{Product}
export const DetailedProduct=（{product}:product）=>{
返回(
{product.productName}
)
}

所以这里的问题是在javascript中，我可以这样做：

import React from "react"
import {Container, Image, Jumbotron} from "react-bootstrap"
import testPic from "../941860.png"
import {Product} from "../interfaces/Product"

export const DetailedProduct = ({product}: Product) => {
    return (
        <Container>
            <Jumbotron fluid>
                    <Image src={testPic} fluid/>
            </Jumbotron>
            <h1>{product.productName}</h1>
        </Container>
    )
}

export const DetailedProduct = ({product}) => {
return ( <h1>{product.price}<h1/> )
}

<DetailedProduct product={product}/>

export const DetailedProduct=（{product}）=>{
返回（{product.price}）
}

我可以这样称呼这个组件：

import React from "react"
import {Container, Image, Jumbotron} from "react-bootstrap"
import testPic from "../941860.png"
import {Product} from "../interfaces/Product"

export const DetailedProduct = ({product}: Product) => {
    return (
        <Container>
            <Jumbotron fluid>
                    <Image src={testPic} fluid/>
            </Jumbotron>
            <h1>{product.productName}</h1>
        </Container>
    )
}

export const DetailedProduct = ({product}) => {
return ( <h1>{product.price}<h1/> )
}

<DetailedProduct product={product}/>

现在对于typescript，any是ofc无效的。所以我尝试了一个界面，甚至都不起作用

它给了我这个错误，我不知道为什么它是任何，而不是从接口的产品

类型“{children:Product；}”缺少类型“Product”中的以下属性：id、productName、productDescription、productPricets（2739）

这是我创建的一个沙箱。希望您能访问它。->

再次感谢您的帮助

我知道typescript和javascript，但jsx对我来说是一片新天地：/

export const DetailedProduct: React.FC<Product> = ({ product }: Product) => {
  return <h1>{product.productName}</h1>;
};

或者更简单地说：

export function DetailedProduct({ product }: { product: Product }) {
  return <h1>{product.productName}</h1>;
}

导出函数DetailedProduct（{product}:{product:product}）{
返回{product.productName}；
}

---

---

所以我需要传递对象{}，然后我需要第二个对象？是那种类型的吗？我在这里感到困惑。例如，我认识科特林

有val-string1:String或fun-test（text:String）{println（$text”）}

但即使在typescript中也有类似于let-text:String但不是String的。但为什么会有这些物体呢？从{}斯里，我问了一个我想理解的问题。什么是const=函数或导出函数？谢谢你，是的，你的解决方案有效：-）这就是react道具的工作原理

{product}

解构

{product:product}

类型的道具。当你有一个以上的道具时，它更有意义。将道具声明为自己的接口以使其更清晰，这是一个很好的惯例。见：