react 入门-创建组件(3)工厂方法

实例


<html>
<head>
    <meta charset="utf-8">
    <title>Factoriestitle>
head>
<body>


<div id="react-container">div>


<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,javascript)