javascript - 将数组传递给组件时出错(React - TypeScript)

Question

尝试描述组件 2 的输入，但收到错误。请告知如何正确传递和描述数组输入。

型号:

interface IIncident {
    id: string,
    title: string
}

组件 1:

interface IncidentManagerProps {
}

interface IncidentManagerState {
    incidents: IIncident[]
}

class IncidentManager extends Component<IncidentManagerProps, IncidentManagerState> {
    constructor(props: IncidentManagerProps) {
        super(props);
        this.state = {
            incidents: []
        }
    }

    render = () => {
        const {incidents} = this.state;

        return (
            <div className={'inc-cont'}>
                <p>All Incidents</p>
                <div className={'all-inc'}>

                    //Error displayed here
                    <Incidents incidents={incidents}/>
                </div>
            </div>
        );
    }
}

组件 2:任何类型的事件都可以解决问题，但这不是一个好方法

interface Incidents {
    incidents: IIncident[]
}

const Incidents = (props: Incidents) => props.incidents.map((inc: IIncident) => (
   <Incident key={inc.id} title={inc.title}/>
));

错误消息:

JSX element type 'Element[]' is not a constructor function for JSX elements.
  Type 'Element[]' is missing the following properties from type 'Element': type, props, key  TS2605

Answer 1

render() 不能返回元素数组，只能返回单个元素。尝试将第二个组件输出包装到任何元素，如下所示:

const Incidents = (props: {incidents: IIncident[]}) => <>
  {props.incidents.map(inc =>
    <Incident key={inc.id} title={inc.title}/>
  )}
</>;