reactjs - 将具有静态属性的函数组件传递给高阶函数，返回的组件丢失静态属性

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}.

或者，您可以使用辅助库，提升非反应静态自动将所有静态属性复制到包装组件。

查看这个 React 文档，必须复制静态方法以获取更多信息。