向子项提供属性时,如何为 React.cloneElement 分配正确的类型?

IT技术 reactjs typescript ecmascript-6
2021-03-31 06:27:34

我正在使用 React 和 Typescript。我有一个充当包装器的react组件,我希望将其属性复制到其子项。我正在遵循 React 使用克隆元素的指南:https : //facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement但是在使用 using 时,React.cloneElement我从 Typescript 收到以下错误:

Argument of type 'ReactChild' is not assignable to parameter of type 'ReactElement<any>'.at line 27 col 39
  Type 'string' is not assignable to type 'ReactElement<any>'.

如何将正确的类型分配给 react.cloneElement?

这是一个复制上述错误的示例:

import * as React from 'react';

interface AnimationProperties {
    width: number;
    height: number;
}

/**
 * the svg html element which serves as a wrapper for the entire animation
 */
export class Animation extends React.Component<AnimationProperties, undefined>{

    /**
     * render all children with properties from parent
     *
     * @return {React.ReactNode} react children
     */
    renderChildren(): React.ReactNode {
        return React.Children.map(this.props.children, (child) => {
            return React.cloneElement(child, { // <-- line that is causing error
                width: this.props.width,
                height: this.props.height
            });
        });
    }

    /**
     * render method for react component
     */
    render() {
        return React.createElement('svg', {
            width: this.props.width,
            height: this.props.height
        }, this.renderChildren());
    }
}
2个回答

问题是对于的定义ReactChild是这样的:

type ReactText = string | number;
type ReactChild = ReactElement<any> | ReactText;

如果您确定这child始终是一个,ReactElement则将其转换为:

return React.cloneElement(child as React.ReactElement<any>, {
    width: this.props.width,
    height: this.props.height
});

否则使用isValidElement 类型保护

if (React.isValidElement(child)) {
    return React.cloneElement(child, {
        width: this.props.width,
        height: this.props.height
    });
}

(我之前没用过,但根据定义文件它就在那里)

让它与类型保护一起工作。但是转换方法仍然会在我的代码中产生一些来自 TS 的错误
2021-05-23 06:27:34
@Chris 是的,事情每隔一段时间就会移动一次。它的当前网址是:github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/...
2021-05-24 06:27:34

这为我解决了:

React.Children.map<ReactNode, ReactNode>(children, child => {
    if(React.isValidElement(child)) {
      return React.cloneElement(child, props
      )
    }
  }

很简单的解决方案

绝对是正确的解决方案,这可以处理多个孩子的情况
2021-06-13 06:27:34