使用 React 功能组件作为类型

Question

我能够使用 React 类组件（即React.Component）作为类型，但无法使用功能/无状态组件。下面是一个例子：

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

interface ComponentProps {
    customFooter: (Footer)
}

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

页脚.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
}