如何在 React.FC 中使用泛型

Question

如何在 React.FC 中使用泛型？

代码：

import React from 'react'

export interface IWaterFallProps<T> {
    className?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
    dataSource?: T[];
    rowKey?: ((item: T) => string) | string;
    renderItem?: (item: T, index: number) => React.ReactNode;
    header?: React.ReactNode;
    footer?: React.ReactNode;
}


// this T error
const WaterFall: React.FC<IWaterFallProps<T>> = props => {
    return (
        <div 
            className={Styles['waterfall-container']}
            style={props.style}
        >
            {props.header}
            {props.children}
            {props.footer}
        </div>
    )
}

WaterFall.defaultProps = {
    dataSource: [],
}
export default React.memo(WaterFall)

'const WaterFall: React.FC<IWaterFallProps<T>> = props => {}'

这个 T 不正确，如何做到这一点？

链接：游乐场

Answer 1

只需使用普通函数声明即可

function WaterFall<T>(props: React.PropsWithChildren<IWaterFallProps<T>>) {
    // your code
}

我见过大量的黑客和方法来使用“复杂”类型和包装器来实现此行为，但当您可以使用如上所示的正常函数声明时，我认为没有必要这样做。