如何使用 React.createElement 基于 prop 或变量动态创建组件
How can I dynamically create a component based on a prop or variable using React.createElement
我有两种类型的组件,例如<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'
标签,这工作正常,但不适用于我自己的组件?
render()
方法需要返回单个元素。现在你返回一个带有单个属性的javascript对象:items
。您需要将这些项包含在顶级元素、另一个组件或 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
相关文章:
- Javascript动态变量(添加了随机数)
- 传递给 PHP 表单时 JavaScript 动态变量上的未定义索引
- Knockoutjs-带有动态变量的模板
- 在Javascript中连接一个动态变量名
- 将字符串与integer连接,用作jquery中的变量(创建动态变量)
- 在jquery中声明基于动态变量的动态数组
- 使用动态变量从tr访问子td
- 动态变量名称 javascript MVC
- 使用Handlebars从动态变量渲染组件
- JS中的动态变量
- 动态变量名语法
- HashJS中的动态变量
- 使用动态变量名更新JSON中的结果
- 显示动态变量(php和javascript)的总数
- 使用动态变量作为多维对象的键
- 车把:将动态变量传递给零件
- 如何使用 jquery 创建动态变量
- 使用 eval JavaScript 创建动态变量
- JavaScript 解析带有动态变量的嵌套 JSON
- 对 Google API HTTP 请求使用动态变量