Блог

Я изучаю React с помощью TypeScript. И я столкнулся с такой проблемой.
У меня есть родительский компонент:

 import React from 'react';
import TestPropsComponent from './TestPropsComponent';
    
 const SomeTable: React.FC= () => {
   return (
     <table>
      <caption>Some Table</caption>
       <tr>
         <th>SomeData1</th>
          <th>SomeData2</th>
          <th>SomeData3</th>
       </tr>
       <tr><td>34,5</td><td>3,5</td><td>36</td></tr>
       <tr><td>35,5</td><td>4</td><td>36⅔</td></tr>
       <tr><td>36</td><td>4,5</td><td>37⅓</td></tr>
     </table>
   );
  }

const App: React.FC = () => {

return (
   <TestPropsComponent someTable={SomeTable}/>
 )
}

export default App;
 

как я могу передать компонент SomeTable в TestPropsComponent?
я создал интерфейс

 export interface ITestPropsComponent {
    someTable: React.ComponentType
}
 

дочерний компонент выглядит следующим образом

 import React from 'react';
import { ITestPropsComponent } from './interface/ITestPropsComponent';


const TestPropsComponent: React.FC<ITestPropsComponent> = ({someTable}) => {
 return (
     {someTable}
 )

}

export default TestPropsComponent
 

но ничего не отображается и отображается ошибка

 The type "({someTable}: PropsWithChildren <ITestPropsComponent>) => {someTable: ComponentType <{}>;}" cannot be assigned to the type "FC <ITestPropsComponent>".
  The type "{someTable: ComponentType <{}>;}" is missing the following properties from the type "ReactElement <any, any>": type, props, key
 

Пожалуйста, подскажите мне наилучшую практику для такого случая

Проблема в вашем коде в том, что someTable в вашем TestPropsComponent это Component не простой узел, поэтому вам нужно его вызвать:

 const TestPropsComponent: FC<ITestPropsComponent> = ({ someTable: SomeTable }) => {
    return <SomeTable />;
}
 

Полный пример