为孩子提供属性时如何为 React.cloneElement 分配正确的类型？

Posted 2023-02-22

【中文标题】为孩子提供属性时如何为 React.cloneElement 分配正确的类型？

【英文标题】：How to assign the correct typing to React.cloneElement when giving properties to children?

【发布时间】：2017-07-04 20:18:21

【问题描述】：

我正在使用 React 和 Typescript。我有一个充当包装器的反应组件，我希望将其属性复制到其子级。我正在遵循 React 使用克隆元素的指南：https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement。但是在使用 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());
    

【参考方案1】：

问题是definition for 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 type guard:

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

（我之前没用过，但是根据定义文件有）

【讨论】：

@Chris 是的，事情每隔一段时间就会被移动。它的当前网址是：github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…

让它与类型保护一起工作。但是铸造方法仍然会在我的代码中产生一些来自 TS 的错误

【参考方案2】：

这为我解决了：

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

很简单的解决方案

【讨论】：

绝对正确的解决方案，这个处理多个孩子的情况