reactjs – 如何在为子项提供属性时为React.cloneElement指定正
发布时间:2020-12-15 20:53:36 所属栏目:百科 来源:网络整理
导读:我正在使用React和Typescript.我有一个反应组件作为包装器,我希望将其属性复制到其子代.我正在遵循React的使用clone元素的指南: https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement.但是当使用React.cloneElement
我正在使用React和Typescript.我有一个反应组件作为包装器,我希望将其属性复制到其子代.我正在遵循React的使用clone元素的指南:
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()); } }
问题是
definition for ReactChild 是这样的:
type ReactText = string | number; type ReactChild = ReactElement<any> | ReactText; 如果您确定该子项始终是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 }); } (我之前没有使用它,但根据定义文件,它在那里) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |