Question

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

我的一个组件映射到项目列表并创建promos或公告，如何传递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

您的var mySecondString = myFirstString.replace(/['"]+/g, '');方法需要返回单个元素。现在，您将返回一个包含单个属性的javascript对象：render()。您需要在顶级元素中包含这些项目，包括另一个Component或DOM元素（items或<div>等）。

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

<span>

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

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

1 个答案: