如何使用 React.createElement 基于 prop 或变量动态创建组件

IT技术 javascript reactjs
2021-05-24 00:20:55

我有两种类型的组件，例如 a<Promo />和 an<Announcement />

我的一个组件映射到项目列表并创建促销或公告，我如何传递 ItemElement，而不必根据 if 语句重复映射。

当前实施

import React, { Component } from 'react'
import Promo from './Promo'
import Announcement from './Announcement'

class Demo extends Component {

  render() {
    const { ItemElement } = this.props
    let items = null

    if(ItemElement === 'Promo'){

      items = this.props.items.map((p, i) => (
        <Promo item={p} />
      ))

    } else if(ItemElement === 'Announcement') {

      items = this.props.items.map((a, i) => (
        <Announcement item={a} />
      ))
    }

    return (
      { items }
    )
  }
}

所需的实现不起作用

import React, { Component } from 'react'
import Promo from './Promo'
import Announcement from './Announcement'

class Demo extends Component {

  render() {
    // this would be 'Promo' or 'Announcement'
    const { ItemElement } = this.props 

    let items = this.props.items.map((p, i) => (
      <ItemElement item={p} />
    ))

    return (
      { items }
    )
  }
}

如果我传入 a 'div'or 'a'or'span'标签，这很好用，但不适用于我自己的组件？

1个回答

您的render()方法需要返回单个元素。现在你返回一个JavaScript对象有一个属性：items。您需要将这些项目包含在顶级元素中，可以是另一个组件，也可以是 DOM 元素（<div>或<span>类似元素）。

至于将组件作为props传入，您没有理由不能这样做：

class Demo extends React.Component {

  render() {
    // this would be 'Promo' or 'Announcement'
    const { ItemElement } = this.props 

    let items = this.props.items.map((p, i) => (
      <ItemElement item={p} />
    ))

    return <ul>{items}</ul>;
  }
}

class Promo extends React.Component {
  render() {
    return <li>Promo - {this.props.item}</li>; 
  }
}

class Announcement extends React.Component {
  render() {
    return <li>Announcement - {this.props.item}</li>;
  }
}

const items = [
  "foo",
  "bar"
];

ReactDOM.render(
  <Demo 
    ItemElement={Promo} // <- try changing this to {Announcement}
    items={items} 
  />,
  document.getElementById('app')
);

这是一个 jsbin 演示：http ://jsbin.com/cakumex/edit?html,js,console,output

其它你可能感兴趣的问题
上一篇在函数中调用 componentDidMount 是不好的做法吗？ 下一篇空模型的3D打印问题