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>;
});

现在您可以毫无问题地使用它。