<!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、建立Factory 方法
const listFactory = React.createFactory(foodList)
3、使用Factory 方法,傳入實參
render( listFactory({list}), document.getElementById('react-container'))Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
