Question

我将一个功能组件传递给了高阶组件，该功能组件具有一些静态属性作为示例！我如何从返回的组件中获取静态属性！


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

Answer 1

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

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

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

将具有静态属性的函数组件传递给高阶函数，并且返回的组件失去静态属性

1 个答案: