Очень простой MWE, ошибка машинописного текста TS2322 (...), не присваиваемая типу IntrinsicAttributes & Props & {children ?: ReactNode; }» - PullRequest
Новая
       60

Очень простой MWE, ошибка машинописного текста TS2322 (...), не присваиваемая типу IntrinsicAttributes & Props & {children ?: ReactNode; }»

0 голосов
/ 09 апреля 2020

Я работаю над проектом 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

Я видел, что у многих людей возникают проблемы, и решения либо не относятся к моему контексту, либо маги c в игре.

Вот очень короткое 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} , но я не понимаю, почему, и это также требует дополнительных инструкций в конце функционального компонента, если я работал с массивом реквизита.

Мой вопрос : как решить эта ошибка?

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Вы неправильно передаете реквизит. Реквизиты должны передаваться непосредственно в качестве атрибутов компонента, например: 

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

Если вы хотите сначала создать объект реквизита, а затем передать его как реквизиты компоненту PropsSpan, вы можете использовать объект вместо этого, например: 

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

Это дает тот же эффект, что и выше, хотя и не рекомендуется.

0 голосов
/ 09 апреля 2020

Вы можете использовать это, но это определенно не 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'};

Синтаксис ссылки

Так в вашем В этом случае он заполнял бы реквизиты так: 

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

И то, что вы сделали, было: 

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

Интерфейс для этого должен выглядеть следующим образом: 

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