Question

我可以使用React类组件（即React.Component）作为Type，但是不能使用功能/无状态组件。这是一个示例：

import Footer from 'path/to/component/Footer';

interface ComponentProps {
    customFooter: (Footer)
}

class MyComponent extends React.Component<ComponentProps> {
    render() {
        return (
            <div>
                {this.props.customFooter}
            </div>
        );
    }
}

Footer.tsx

const Footer: React.StatelessComponent<{ children?: any }> = ({ children }) => (
    <footer>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

红色下划线位于(Footer)下，显示为：Cannot find name 'Footer'。

我发现，如果我使用React类组件而不是功能组件，那么我的问题就消失了。为什么不能使用功能组件，为什么我可以使用它？

Answer 1

页脚不是类型，它只是变量，要获取可以使用typeof

的类型

const Footer: React.StatelessComponent<{ children?: any }> = ({ children }) => (
    <footer>
        <div>
            {children}
        </div>
    </footer>
);

interface ComponentProps {
    customFooter: typeof Footer    
}

然后您可以像这样使用它：

class MyComponent extends React.Component<ComponentProps> {
    render() {
        const {customFooter: CustomFooter} = this.props;
        return (
            <div>
                {<CustomFooter>footer children</CustomFooter>}
            </div>
        );
    }
}

const MainComponent = () => {
    return (<MyComponent customFooter={Footer}/>)
};

如果您想添加一个实际的jsx元素作为这样的值：

const MainComponent = () => {
    return (<MyComponent customFooter={<Footer>footer children</Footer>}/>)
};

然后，您需要将customFooter的类型设置为类似React.ReactNode的类型：

interface ComponentProps {
    customFooter: React.ReactNode
}

使用React功能组件作为类型

1 个答案: