Question

我有一个列表组件，该组件可以从数组中呈现数据，并且我喜欢将该组件作为属性传递以呈现每个项目。有谁知道我如何将一个类作为属性传递给列表组件，并使用它动态呈现项目。

Answer 1

JSX由babel转换，因此每个<Component {...props} />都变成React.createElement('Component', props)

所以你可以这样做

const items = [{
  constr: 'Child',
  someProp: 'value'
}];

function Parent(props) {
  return (<div>
    {props.items.map(item =>
        React.createElement(item.constr, item)
    )}
  </div>);
}

<Parent items={items} />

编辑：

您还可以传递类/函数的引用

const items = [{
  constr: Child, // <- reference
  someProp: 'value'
}]

然后利用对象销毁分配

function Parent(props) {
  return (<div>
    {props.items.map(({constr: Element, ...props}) => 
      <Element {...props} />
    )}
  </div>);
}

Answer 2

您想要一个可重用的高阶组件。像这样：

// -> Build your HOC
function WithItem(Component) {
  return function WithItemComponent({ item, ...props }) {
    if (item) return (<Component {...props}>{item}</Component>);
    return (<Component {...props}/>);
  }
}
export default WithItem;

// -> Then Implement it
const WithItemMyComponent = WithItem(MyComponent)

render() {
  return (
    <WithItemMyComponent item={item} />
  )
}

React Component动态项目渲染器

2 个答案: