将具有静态属性的函数组件传递给高阶函数并返回组件丢失的静态属性答案

【问题标题】：pass function component with static property to highorder funtion and returned component lost static property将具有静态属性的函数组件传递给高阶函数并返回组件丢失的静态属性
【发布时间】：2019-05-14 15:19:33
【问题描述】：

我将一个函数组件传递给高阶组件，该函数组件具有一些静态属性，例如！如何从返回的组件中获取静态属性！


function TestHighOrderCp<T>(
  Cp: React.ComponentType<T>
): (
  props: T & {
    name: string
  }
) => JSX.Element {
  const rs = (props: T & { name: string }) => {
    const name = 'testName'
    return <Cp name={name} {...props} />
  }
  return rs
}

const A1 = function A1(props: { e: string }) {
  return <div>{props.e}</div>
}
A1.defaultProps = {
  e: 12
}
A1.name = '12'

const A11 = TestHighOrderCp<A1>
// A11.Name = {} // get Error here

【问题讨论】：

标签： reactjs typescript properties static high-order-component

【解决方案1】：

您需要手动复制静态属性，因为即使您传播道具，它也不会被复制，{...props}。

或者您可以使用帮助程序库hoist-non-react-statics 自动将所有静态属性复制到包装组件。

查看这个 React 文档，Static Methods Must Be Copied Over 了解更多信息。

【讨论】：