react 入门-创建组件工厂方法
Posted teamlet
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react 入门-创建组件工厂方法相关的知识，希望对你有一定的参考价值。
实例
<!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')
)以上是关于react 入门-创建组件工厂方法的主要内容，如果未能解决你的问题，请参考以下文章