非常简单的 MWE，打字稿错误 TS2322 (...) not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

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

您没有正确传递道具。 Props 应该像这样直接作为属性传递给组件：

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>
    );
};

我建议使用展开运算符 ...，就像您在问题中告诉我们的那样，由提出。

你说你看不懂所以快点解释：

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 (...) not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

Very simple MWE, typescript error TS2322 (...) not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

typescript

reactjs

react-typescript