React.memo JSX.Element 類型

Question

如果你有這些簡單的組件：

const Simple = (_props) => {
    return <div>Hello</div>;
}

const SimpleMemo = React.memo(Simple);
const SimpleMemo2 = React.memo((_props): JSX.Element => {
    return <div>Hello</div>;
});

那么SimpleMemo和SimpleMemo2被推斷為不同的類型。 SimpleMemo是React.MemoExoticComponent<(_props: any) => JSX.Element>而SimpleMemo2是React.NamedExoticComponent<object> 。

此外，即使代碼相同，您也無法為SimpleMemo2設置一些屬性：

    render() {
        return (
            <div>
                <Simple style={{backgroundColor: "green"}}/>
                <SimpleMemo style={{backgroundColor: "green"}}/>
                <SimpleMemo2 style={{backgroundColor: "green"}}/>
            </div>
        );
    }

這給<SimpleMemo2 style=一個錯誤：

Type '{ style: { backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes & object'.
  Property 'style' does not exist on type 'IntrinsicAttributes & object'.

但是它適用於SimpleMemo 。 這里發生了什么？ MemoExoticComponent和NamedExoticComponent之間有什么區別？如何使SimpleMemo2工作而不必將 function 分配給變量？

Answer 1

你的道具沒有打字。 所以SimpleMemo “有效”，但它實際上只接受任何道具。 例如，這可以正常工作，但實際上不應該：

<SimpleMemo thisDoesNotExist="butNoError" />

另一方面， SimpleMemo2按預期工作 - 它給你一個錯誤，因為你試圖傳遞組件不期望的道具。 要修復它，請將所有道具添加到類型：

type Props = {
  style?: React.CSSProperties;
};

const SimpleMemo2 = React.memo(({ style }: Props): JSX.Element => {
    return <div style={style}>Hello</div>;
});

現在您可以毫無問題地使用它。