React基础教程(六) - 博客详情

1.使用map实现渲染列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
</head>
<body>
<div id="app">
    <ul id="cityList">
    </ul>
</div>
<script type="text/babel">

    let citys = ['北京', '上海', '广州', '深圳'];
    //使用map实现 
    let node = citys.map((v, index) => {
        return (<li key={index}>{v}</li>)
    })

    //使用forEach实现
    function initCityList() {
        let cityList = [];
        citys.forEach((v, index) => {
            cityList.push(<li>{v}</li>)
        })
        return cityList;
    }
    ReactDOM.render(node, document.querySelector("#cityList"));
    //ReactDOM.render(initCityList(),document.querySelector("#cityList"));
</script>
</body>
</html>

当然也可以使用传统的for循环实现渲染列表。

2.在jsx中添加事件

在实现动态渲染列表的同时对dom节点添加单击事件。实现选中的li节点字体为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <style>
        .myclass {
            background: lightpink;
            color: cornflowerblue;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <ul id="cityList">

    </ul>
</div>
<script type="text/babel">

    let citys = ['北京', '上海', '广州', '深圳'];
    let currentIndex = -1;
    function initCityList() {
        let node = citys.map((v, index) => {
            return (<li style={{cursor:'pointer', color: (index === currentIndex ? 'red' : 'black')}} key={index} onClick={() => {
                currentIndex = index;
                render();
            }}>{v}</li>)
        })
        return node;
    }

    /*forEach实现
    function initCityList() {
        let cityList = [];
        citys.forEach((v, index) => {
            cityList.push(<li
                style={{cursor: 'pointer', color: (index === currentIndex ? 'red' : 'black')}} key={index}
                onClick={() => {
                    currentIndex = index;
                    render();
                }}>{v}
            </li>)
        })
        return cityList;
    }*/
    function render() {
        //ReactDOM.render(node, document.querySelector("#cityList"));
        ReactDOM.render(initCityList(), document.querySelector("#cityList"));
    }
    render();

</script>
</body>
</html>

运行效果：