React可以渲染什麼類型的東西？

Question

我有一個使用道具作爲渲染組件的組件。由於React提供了很多方法來創建組件類，這個道具的類型註釋應該是什麼？

在下面的示例中，Wrap的正確類型註釋是什麼？

import React from 'react' 

function Wrap ({ component: Component }) { 
    return <Component foo /> 
} 

class ClassComponent extends React.Component { 
    render() { 
    return <div>foo: {this.props.foo}</div> 
    } 
} 
class ClassPureComponent extends React.PureComponent { 
    render() { 
    return <div>foo: {this.props.foo}</div> 
    } 
} 

const CreateClassComponent = ReactClass.createClass({ 
    render() { 
    return <div>foo: {this.props.foo}</div> 
    } 
}) 

function PureFunctionComponent ({ foo }) { 
    return <div>foo: {foo}</div> 
} 

// These should all be valid 
<Wrap component={ClassComponent} /> 
<Wrap component={ClassPureComponent} /> 
<Wrap component={CreateClassComponent} /> 
<Wrap component={PureFunctionComponent} /> 

Answer 1

使用ReactClass<any>的一個例子是不安全的，因爲它允許

<Wrap component={(props: {bar: string}) => <div>{props.bar}</div>} />; 

類型安全的替代

type FunctionComponent<P> = (props: P) => ?React$Element<any>; 
type ClassComponentT<D, P, S> = Class<React$Component<D, P, S>>; 
type Component<D, P, S> = ClassComponentT<D, P, S> | FunctionComponent<P>; 

function Wrap ({ component: Component }: {component: Component<void, { foo: any }, void>}) { 
    return <Component foo /> 
} 

Answer 2

我認爲ReactClass<any>是您正在尋找的類型。

// @flow 
import React from 'react' 

function Wrap ({ component: Component }: {component: ReactClass<any>}) { 
    return <Component foo /> 
} 

class ClassComponent extends React.Component { 
    render() { 
    return <div>foo: {this.props.foo}</div> 
    } 
} 

class ClassPureComponent extends React.PureComponent { 
    render() { 
    return <div>foo: {this.props.foo}</div> 
    } 
} 

const CreateClassComponent = React.createClass({ 
    render() { 
    return <div>foo: {this.props.foo}</div> 
    } 
}); 

function PureFunctionComponent ({ foo }) { 
    return <div>foo: {foo}</div> 
} 

// These should all be valid 

<Wrap component={ClassComponent} />; 
<Wrap component={ClassPureComponent} />; 
<Wrap component={CreateClassComponent} />; 
<Wrap component={PureFunctionComponent} />; 

Example on flowtype.org/try

有一個反應高階分量here in the docs