Question

比方说，我必须用相同的UI生成几个组件。

我希望所有UI由HOC生成但数据应直接从子组件传递，而无需使用道具。

例如，

const HOC = WrappedComponent => {
  return(
    <div>
      <h1>/*Component Name passed here*/</h1>
      <p>Data: /*Some Data passed here*/</p>
    </div>
  )
}

我的子组件看起来像这样，

import Data from //path

const Component1 = () => {}

expord default HOC(Component1)

假设我的数据是从这样的文件中导入的，

const data = [
  {
    comName: //some name,
    data: //some data
  },
  {
    comName: //some name,
    data: //some data
  },
  {
    comName: //some name,
    data: //some data
  }
]

我该如何实现？

Answer 1

我认为您可以将Data作为第二个参数传递给组件：

export default HOC(Component1, Data)

并在HOC中使用数据：

const HOC = (WrappedComponent, data) => {
  return(
    <div>
      <h1>/*Component Name passed here*/</h1>
      <p>Data: /*Some Data passed here*/</p>
    </div>
  )
}

如何使用React HOC生成多个组件？

1 个答案: