React中的遍历

数组

---

• 数据结合 { } 渲染
• react 可以直接展开数组，将元素渲染到页面
• 以字符串的形式渲染到页面

数组内元素是数值

<script type="text/babel">
//  react 可以直接展开数组，将元素渲染到页面
    const arr = [1, 2, 3];
    ReactDOM.render(<div>
        {
     
     arr}
    </div>, document.querySelector("#root"));
</script>

数组内元素是标签

• 标签会被解析到 html 标签

<div id="root"></div>

<script type="text/babel">
    // react是可以直接展开数组的。

    const arr = [<h1>1</h1>, <h2>2</h2>, <h3>3</h3>];
    ReactDOM.render(<div>
        {
     
     arr}
    </div>, document.querySelector("#root"));
</script>

map 遍历数组渲染

---

• react 当中遍历列表要指定 key 值，可以使用 map 方法进行映射

注意：

map 遍历时，需要添加 key 的值

变量需要用差值表达式 { } ，花括号包裹

<div id="root"></div>

<script type="text/babel">
    const arr = ["21天精通JAVASCRIPT", "大前端", "web前端工程的自我修养"];
    ReactDOM.render((
        <div>
            {
     
     
                arr.map(v => "《" + v + "》")
            }
        </div>
    ), document.querySelector("#root"));
</script>

map 遍历数组 添加 p 标签渲染，没有绑定 key

• p 标签会被解析到页面
• 没有绑定 key 会报错，但可以正常渲染

<div id="root"></div>

<script type="text/babel">
    const arr = ["21天精通JAVASCRIPT", "大前端", "web前端工程的自我修养"];
    ReactDOM.render((
        <div>
            {
     
     
                arr.map(v => (
                    <p>《{
     
     v}》</p>
                ))
            }
        </div>
    ), document.querySelector("#root"));
</script>

map 遍历数组 添加 p 标签渲染，绑定 key，不会报错

<div id="root"></div>

<script type="text/babel">
    const arr = [{
     
     
        id: 1,
        newsTitle: "2020年春节为何来得“早”？",
        newsHref: "https://new.qq.com/rain/a/20200113A03ZX900"
    }, {
     
     
        id: 2,
        newsTitle: "印媒关注中国在西藏展示两种新武器，其中一种是世界独一份",
        newsHref: "https://new.qq.com/omn/20200112/20200112A0AF2J00.html"
    }];
    ReactDOM.render((
        <div>
            {
     
     
                arr.map(v => (
                    <p key={
     
     v.id}>
                        <a href={
     
     v.newsHref}>{
     
     v.newsTitle}</a>
                    </p>
                ))
            }
        </div>
    ), document.querySelector("#root"));
</script>

map 遍历数组 添加 p 标签，调用函数渲染

<div id="app"></div>

<script type="text/babel">

    const arr = ['G', 'M', 'L'];
    const arr2 = ['H', 'E', 'L', 'L', 'O'];

    function showList(arr) {
     
     
        return arr.map((item, index) =>
            <p key={
     
     index}>{
     
     item}</p>
        )
    }

    ReactDOM.render(<div>
        {
     
     
            showList(arr)
        }
        {
     
     
            showList(arr2)
        }
    </div>, document.querySelector('#app'));
</script>

渲染对象

---

• 将对象转换为数组再进行遍历
• 可以利用 Object.keys() 或者 Object.values() 将属性或者属性值转换为数组
• 然后进行遍历

<div id="app"></div>

<script type="text/babel">

    const obj = {
     
     a: 'G', b: 'M', c: 'L'};
    let curIndex = 0;

    function showList(params) {
     
     
        return (
            <ul>
                {
     
     
                    // 转换为 数组再进行遍历
                    Object.values(params).map((item, index) => (
                        // 使用 className
                        <li key={
     
     index} className={
     
     index === curIndex ? 'active' : ''} onClick={
     
     () => {
     
     
                            curIndex = index; // 赋值索引
                            render(); // 赋值完后，重新调用渲染
                        }}>{
     
     item}</li>
                    ))
                }
            </ul>
        )
    }

    function render() {
     
     
        ReactDOM.render(<div>
            {
     
     
                showList(obj)
            }
        </div>, document.querySelector('#app'));
    }

    render();
</script>