Question

我正在尝试向组件发送一组 react 元素。我的组件 -

type StatusPanelProps = {
statusIconID: string;
    statusData: ReactNode;
};
const StatusPanel = (rows: Array<StatusPanelProps>): JSX.Element => {
    return (
        <Column styles={statusPanelStyles} testID="status_panel" spacing={25}>
            {rows.map((row, i) => (
                <Row testID="status_part" spacing={15} key={i}>
                    <Column testID="status_icon">
                        <Icon id={row.statusIconID} />
                    </Column>
                    <Column testID="status_data">{row.statusData}</Column>
                </Row>
            ))}
        </Column>
    );
};

我称之为 -

export default function LeftPanel(): JSX.Element {
    const statusArray: Array<StatusPanelProps> = [];

    !isLoadingLeftPanel &&
        getCompleteStatus(leftPanel).map((status: Partial<TDModellingLeftPanel>) =>
            statusArray.push({
                statusIconID: getStatusIconIds(status),
                statusData: <Status statusInfo={status} />,
            })
        );

    return <StatusPanel rows={statusArray} />;
}

但这给了我一个错误，不知道为什么 -

<块引用>

输入'{行：StatusPanelProps[]; }' 不可分配给类型 'IntrinsicAttributes & StatusPanelProps[]'。类型“IntrinsicAttributes & StatusPanelProps[]”上不存在属性“rows”。

Answer 1

您似乎忘记在 StatusPanel 组件中使用解构，而不是

const StatusPanel = (rows: Array<StatusPanelProps>): JSX.Element => {

试试

const StatusPanel = ({ rows }: { rows: Array<StatusPanelProps> }): JSX.Element => {

打字稿道具问题

1 个答案: