react 渲染列表数据

时间:2020-05-01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test">

</div>

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script src="js/prop-types.js"></script>

<script type="text/babel">
    // 数据
    let data = ['java', 'php', 'js'];
    // 创建虚拟dom
    let div = <ul>
        {data.map((item,index) => <li key={index}>{item}</li>)}
    </ul>;

    // 渲染虚拟dom
    ReactDOM.render(div, document.getElementById('test'));
</script>
</body>
</html>