React学习手册

React

进阶

｜

81

items.map((ingredient, key) =>

React.DOM.li({key}, ingredient)

)

)

ReactDOM.render(

list,

document.getElementById('react-container')

)

使用工厂类的组件

如果用户希望像函数调用那样使用组件来达到简化代码的目的，那么需要显式创建一

个工厂类（参见示例

4-21

）。

示例

4-21

：为

IngredientsList

创建一个工厂类

const { render } = ReactDOM;

const IngredientsList = ({ list }) =>

React.createElement('ul', null,

list.map((ingredient, i) =>

React.createElement('li', {key: i}, ingredient)

)

)

const Ingredients = React.createFactory(IngredientsList)

const list = [

"1 lb Salmon",

"1 cup Pine Nuts",

"2 cups Butter Lettuce",

"1 Yellow Squash",

"1/2 cup Olive Oil",

"3 cloves of Garlic" ...