[英]How can I dynamically create a component based on a prop or variable using React.createElement
I have 2 types of components, for example a <Promo />
and an <Announcement />
我有2种类型的组件,例如
<Promo />
和<Announcement />
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. 我的组件之一映射到项目列表上并创建促销或公告,我如何传递ItemElement,而不必基于if语句重复映射。
current implementation 当前实施
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 }
)
}
}
desired implementation not working 所需的实现不起作用
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 }
)
}
}
This works fine if I pass in say a 'div'
or 'a'
or 'span'
tag, but not for my own components? 如果我输入一个
'div'
或'a'
或'span'
标记,但不是针对我自己的组件,这会很好地工作?
Your render()
method needs to return a single element. 您的
render()
方法需要返回一个元素。 Right now you're returning a javascript object with a single property: items
. 现在,您将返回一个具有单个属性的javascript对象:
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). 您需要将这些项目包含在顶级元素,另一个Component或DOM元素(
<div>
或<span>
等)中。
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')
);
Here's a jsbin demonstrating: http://jsbin.com/cakumex/edit?html,js,console,output 这是一个jsbin演示: http ://jsbin.com/cakumex/edit?html,js,console,output
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.