版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/teamlet/article/details/78797386
实例
<!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')
)