reactjs - 克隆元素 : Type has no properties in common with type Partial & Attributes

Question

在类似于以下的代码中，我得到 Type { foo: number } has no properties in common with type 'Partial<Child> & Attributes'用于调用 cloneElement 的第二个参数我不明白为什么...在我看来 Partial<Child>正在获取正确形状的 Prop ，但 TypeScript 不同意。

这是来自 https://github.com/DefinitelyTyped/DefinitelyTyped 的库版本

"@types/react": "16.3.14",
"@types/react-dom": "16.0.5",

示例如下:

import * as React from "react";
interface Props {
  foo: number;
}
class Child extends React.Component<Props> {
    public render(): React.ReactNode {
        return <span>{this.props.foo}</span>;
    }
}
class Parent extends React.Component<Props> {
    public render(): React.ReactNode {
        return React.Children.map(this.props.children, (child: JSX.Element) => this.cloneChild(child));
    }

    public cloneChild(child: React.ReactElement<Child>): React.ReactElement<Child> {
        const newProps = {
            foo: this.props.foo,
        };
        return React.cloneElement<Child>(child, newProps);
    }
}

这是一个错误，还是我遗漏了什么？

Answer 1

类型参数为ReactElement和 cloneElement表示 Prop 的类型而不是组件，因此您可能打算这样做:

public cloneChild(child: React.ReactElement<Props>): React.ReactElement<Props> {
    const newProps = {
        foo: this.props.foo,
    };
    return React.cloneElement<Props>(child, newProps);
}

或者，等价的，

public cloneChild(child: React.ReactElement<Props>) {
    const newProps = {
        foo: this.props.foo,
    };
    return React.cloneElement(child, newProps);
}

另外，类型转换不正确 (child: JSX.Element) . child 的类型在 React.Children.map是 ReactChild (归结为 ReactElement<any> | string | number ，)并通过转换为 JSX.Element (== ReactElement<any> )，您没有考虑可能的字符串或数字 child 。从 cloneElement在 string 上失败或 number children ，如果您包含例如文本元素，当前代码会给出运行时错误:<Parent>x<Child/></Parent> .

要摆脱类型错误而不进行强制转换，您可以检查 string和 number像这样:

public render() {
    return React.Children.map(this.props.children, (child) =>
      typeof child === 'number' || typeof child === 'string'
      ? child
      : this.cloneChild(child)
    );
}