react入門-コンポーネント作成(3)工場方法

3923 ワード

react javascript

実例


<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')
)

axis 2の異なる方式を実現するクライアント