react 入门-创建组件（3）工厂方法

来源：互联网发布：鼠标点击翻译软件编辑：程序博客网时间：2024/06/15 19:50

实例

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Factories</title></head><body><!-- Target Container --><div id="react-container"></div><!-- React Library & React DOM--><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script>    const { render } = ReactDOM    const foodList = ({ list }) =>        React.createElement('ul', null,            list.map((item, i) =>                React.createElement('li', {key: i}, item)            )    )    const listFactory = React.createFactory(foodList)    const list = [        "1 apple",        "1 banana",        "2 oranges",        "2 tomatos"    ]    render(        listFactory({list}),        document.getElementById('react-container')    )</script></body></html>

说明

1、创建无状态函数

const foodList = ({ list }) =>        React.createElement('ul', null,            list.map((item, i) =>                React.createElement('li', {key: i}, item)            ))

2、创建工厂方法

const listFactory = React.createFactory(foodList)

3、使用工厂方法,传入实参

render(    listFactory({list}),    document.getElementById('react-container'))

阅读全文

0 0