reactjs - 'Element[]' 类型的参数不能分配给 'Element' 类型的参数

Question

import React, { Fragment } from 'react'

const Ques = (Props:JSX.Element) => {
    return (
        <Fragment>{Props}</Fragment>
    );
}
const ListName = ["Gus","Thekla","Anna","Sophia"].map((Name)=> <div>{Name}</div>)
Ques(ListName)

在线 Ques(ListName)我收到这个错误。

Argument of type 'Element[]' is not assignable to parameter of type > > 'Element'. Type 'Element[]' is missing the following properties from type 'Element': > type, props, key

Answer 1

您正在传递一个 JSX.Element 数组，

const Ques = (Props:JSX.Element[]) => {
    return (
        <Fragment>{Props}</Fragment>
    );
}
const ListName = ["Gus","Thekla","Anna","Sophia"].map((Name)=> <div>{Name}</div>)
Ques(ListName)

当您运行此代码时，您将收到一条警告，提示您应该为列表项提供一个键。 “键”是创建元素列表时需要包含的特殊字符串属性。

我会这样写

const Ques = (Props:JSX.Element[]) => {
    return (
        <Fragment>{Props}</Fragment>
    );
}
const ListName = ["Gus","Thekla","Anna","Sophia"].map((Name,nameindex)=> <div key={`${Name}${nameindex/10}`}>{Name}</div>)
Ques(ListName)

您可以在此处阅读有关 key 的信息 link .