TypeScript/JSX中的通用React組件？

Question

我想創建可插入的React組件。組件由它們的類名解析，所以我很自然地被泛型所吸引;但這似乎並不奏效。

class Div<P, S, C extends React.Component> extends React.Component<void, void> { 

    render() { 
     return (
      <div> 
       <C /> // error: Cannot find name 'C'. 
      </div> 
     ); 
    } 
} 

是否有替代方法來編寫可插入的TypeScript組件？

Answer 1

這是不可能的使用泛型，雖然目前還不清楚爲什麼你想使用泛型來解決這個問題，而不是僅僅使用正常的props機制來提供內部元素。

原因是類型被擦除，因此您需要爲該類提供類構造函數，以便它具有對要在C中實例化的值的引用。但除了JSX props（或state或您需要做的任何事情）之外，沒有其他地方可以讓您通過該值。

，而不需要編寫

// not sure what you would expect the syntax to be? 
const elem = <Div<Foo> ... />; 

換句話說，你應該寫

const elem = <Div myChild={Foo} /> 

，並使用它在你的render作爲

const Child = this.props.myChild; 
return <div><Child /></div>; 

順便說一句，正確的約束new() => React.Component而不是React.Component - 記住th在你寫在JSX（<Div>等）中的東西是構造函數的類，而不是類實例。