如何使用React.createElement基於prop或變量動態創建組件

Question

我有2種類型的組件，例如<Promo />和<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 }
    )
  }
}

如果我輸入一個'div'或'a'或'span'標記，但不是針對我自己的組件，這會很好地工作？

Answer 1

您的render()方法需要返回一個元素。 現在，您將返回一個具有單個屬性的javascript對象： items 。 您需要將這些項目包含在頂級元素，另一個Component或DOM元素（ <div>或<span>等）中。

至於將組件作為道具傳遞，沒有理由您不應該這樣做：

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