如何使用React.createElement基于prop或变量动态创建组件 [英] How can I dynamically create a component based on a prop or variable using React.createElement

问题描述

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

I have 2 types of components, for example a <Promo /> and an <Announcement />

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

One of my components maps over a list of items and creates either promos or announcements, how can I pass an ItemElement, rather than have to repeat the mapping based on an if statement.

当前实施

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'标记，但不适用于我自己的组件？

This works fine if I pass in say a 'div' or 'a' or 'span' tag, but not for my own components?

推荐答案

你的 render（）方法需要返回一个元素。现在你要返回一个带有单个属性的javascript对象： items 。您需要在顶级元素中包含这些项目，包括另一个Component或DOM元素（< div> 或< span> 等。）

Your render() method needs to return a single element. Right now you're returning a javascript object with a single property: items. You need to contain those items in a top level element, either another Component, or a DOM element (<div> or <span> or the like).

至于作为道具传递一个组件，你没有理由不能这样做：

As for passing a component in as a prop, there's no reason you shouldn't be able to do that:

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

Here's a jsbin demonstrating: http://jsbin.com/cakumex/edit?html,js,console,output

这篇关于如何使用React.createElement基于prop或变量动态创建组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！