Блог

Я пытаюсь понять, как вводить пространства имен react.

В настоящее время у меня есть компонент

 import {Head} from "./head/head";
import {Body} from "./body/body";

interface Props {
  id: string
}

const Component:React.FC<Props> = ({id}) =>{
return <span>Hello World</span>
};

Component.Head = Head;
Component.Body = Body;
 

использование-это что-то вроде

 <Component>
 <Component.Head></Component.Head>
 <Component.Body></Component.Body>
</Component>
 

Я продолжаю получать эту опечатку

Свойство «Head» не существует для типа «FC»

Что я упускаю?

Ну, вы говорите, что «Компонент» имеет тип React.FC. Это означает, что он имеет свойства / структуру типа, определенного в React.FC.

Но затем вы даете компоненту два свойства Головы и тела, которые не определены в React.Тип ФК.

Поэтому, если бы вы действительно хотели сделать то, что пытаетесь сделать в своем коде, вам нужно было бы определить свой собственный тип, расширяющий React.FC и ожидает как свойств головы, так и тела.

 type TypeNameHere<Props> = React.FC<Props> amp; {
  Head: *TypeOfWhateverHeadWillBeHere*;
  Body: *TypeOfWhateverBodyWillBeHere*;
};
 

Затем вы бы использовали это для определения компонента

 const Component:TypeNameHere<Props> = ....;
 

Я приведу более простой пример без реакции на демонстрацию:

 type TypeExample1 = (props: string) => void;

const Component:TypeExample1 = (name) => console.log(name);

Component.Head = 'Head here'; //Error: Property Head does not exist on type TypeExample1
Component.Body = 'Body here'; //Error: Property Body does not exist on type TypeExample1
 

Приведенный выше код приведет к той же ошибке, потому что, согласно определению TypeExample1, это должна быть просто функция, которая принимает строку и ничего не возвращает, без каких-либо свойств Головы или тела.

Принимая во внимание, что приведенный ниже код позволит это сделать, создав новый тип TypeExample2, который расширяет TypeExample1, чтобы также включать свойства для головы и тела:

 type TypeExample1 = (props: string) => void;

type TypeExample2 = TypeExample1 amp; {Head: string; Body: string;}

const Component:TypeExample2 = (name) => console.log(name);


Component.Head = 'Head here';
Component.Body = 'Body here';
 

Надеюсь, это поможет!