Question

我正在研究一个React / typescript项目。我正在努力解决错误TS2322，并解决它。

Type '{ submissionsArray: SubmissionProps[]; }' is not assignable to type 'IntrinsicAttributes & SubmissionProps[] & { children?: ReactNode; }'.
  Property 'submissionsArray' does not exist on type 'IntrinsicAttributes & SubmissionProps[] & { children?: ReactNode; }'.  TS2322

我已经看到很多人遇到了问题，解决方案要么不适用于我的环境，要么在发挥作用。

这是非常短的MWE

import React, { FunctionComponent } from 'react'

type Props = {
    name: string
}

const PropsSpan: FunctionComponent<Props> = (props) => <span>{props.name}</span>

const PropsComponent = () => {
    const p: Props = { name: 'George' }
    return <PropsSpan props={p}></PropsSpan>
}

export default PropsComponent

我尝试过的事情：一种神奇的解决方案是使用{... p}，但我不明白为什么，并且如果功能组件的末尾还需要其他说明，如果我当时正在处理各种道具。

我的问题：如何解决此错误？

Answer 1

您没有正确传递道具。道具应直接作为属性传递给组件，如下所示：

const PropsComponent = () => {
    return <PropsSpan name="George"></PropsSpan>
}

如果您要先创建props对象，然后将其作为props传递给PropsSpan组件，则可以使用对象分解，就像这样：

const PropsComponent = () => {
    const p: Props = { name: 'George' }
    return <PropsSpan {...p}></PropsSpan>
}

尽管不建议这样做，但效果与上述相同。

Answer 2

您可以使用此方法，但这绝对不是JSX方式。

import React, {ReactElement} from 'react';

interface ComponentProps {
    str: string;
}

const Component = (props: ComponentProps): ReactElement => {
    return <p>{props.str}</p>;
};



const App = (): ReactElement => {
    const props: ComponentProps = {
        str: 'hey',
    };

    return (
        <div>
            {React.createElement(Component, props)}
        </div>
    );
};

我建议使用传播运算符...，就像您在问题中告诉我们的那样，并且由Phoenix提出。

您说您不理解它，所以快速解释一下：

const obj1 = {a: 'foo', b: 'bar'};

const obj2 = {
    something: 'hello world',
    ...obj1,
};
console.log(obj2) -> {a: 'foo', b: 'bar', something: 'hello world'};

Spread Syntax refference

因此，在您的情况下，它会像以下内容填充道具：

<Component
    prop1={<something>}
    prop2={<something>}
/>

您所做的是：

<Component
   props={{prop1: <something>, props2: <something>}}
/>

该界面必须如下所示：

interface ComponentProps {
    props: {
        prop1: SomeType;
        prop2: SomeType;
   };
};

非常简单的MWE，打字稿错误TS2322（...）无法分配给类型'IntrinsicAttributes＆Props＆{children ?: ReactNode; }'

2 个答案: