React 循环

傷城~ 2022-12-27 04:43 139阅读 0赞

/\*循列表环

循环就用 this.props.data.map( (item,index) => \{ return <li key=\{index\}>\{item\}</li> \} )  
      根据数组中的内容生成一个包含有结构的新数组  
      通过数组生成的结构，每一个元素必须包含有一个key属性，同时这个key属性的值必须是唯一的  
 \*/

var dataList = {
        friends: {
        name: "好友",
        list: [
          {
            username: "九华彩",
            message:
              "什么叫做人脉？人脉并不是你认识多少人，而是你有困难时，有多少人来帮助你。",
            vip: true,
          },
        ],
      },
    }
    
    //循环对象
    class Panel extends React.Component {
          render() {
              return (
                <div className="panel">
                  {Object.keys(this.props.data).map((item, index) => { //item 相当于key
                    return <Group key={index} data={this.props.data[item]}></Group>;
                  })}
                </div>
              );
            }
          }
    
    //循环列表
    class Group extends React.Component {
          render() {
              return (
                <div>
                  <h2 className="title">{this.props.data.name}</h2>
                  <List data={this.props.data.list}></List>
                </div>
              );
            }
          }

<script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
      </head>
      <body>
        <div id="app"></div>
    
        <script type="text/babel">
          /**
           * React没有模板语法，插值表达式中只支持表达式，不支持语句：for，if
           *
           */
    
          var users = ["小红", "小明", "小花"];
          var obj = { left: 100, top: 200 };
    
          class List extends React.Component { //首字母必须大写
            render() {
              return this.props.data.map((item, index) => {
                return <li key={index}>{item}</li>;
              });
            }
          }
    
          ReactDOM.render(
            <div>
              <ul>
                {
                  users.map((user, index) => {
                    return <li key={index}>{user}</li>;
                  })
                }
              </ul>
    
              <ul>
                <List data={users} />
              </ul>
    
              <ul>
                {
                  //循环对象
                  /*['left', 'top'] Left - 100*/
                  Object.keys(obj).map((key) => {
                    return (
                      <li key={key}>
                        {key} - {obj[key]}
                      </li>
                    );
                  })
                }
              </ul>
            </div>,
            document.getElementById("app")
          );
        </script>
      </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 react获取循环出来的复选框的值

简单代码 import React, { Component } from "react"; import { Checkbox } from "sem

忘是亡心i/ 2023年10月09日 03:11/ 0 赞/ 45 阅读

相关 React 循环

/\循列表环循环就用 this.props.data.map( (item,index) => \{ return <li key=\{index\}>\{ite

傷城~/ 2022年12月27日 04:43/ 0 赞/ 140 阅读

相关如何解决 React.useEffect() 的无限循环

> 作者：Shadeed > 译者：前端小智 > 来源：dmitripavlutin > 点赞再看，微信搜索\\【[大迁世界][Link 1]】,B站关注【[前端小智

ゝ一世哀愁。/ 2022年11月15日 14:26/ 0 赞/ 184 阅读

相关 React学习:事件绑定、组件定义、for、map循环-学习笔记

文章目录 React学习:事件绑定、组件定义、for、map循环-学习笔记事件绑定组件定义（参数传递）

朴灿烈づ我的快乐病毒、/ 2022年09月01日 14:48/ 0 赞/ 133 阅读

相关 react项目中的组件编写，和数据循环

1.还是之前项目的同一个页面，同一个模拟数据 ![20170920164357143][]![20170920164403241][] 2.在页面当中我们写一个ui组件，通

╰+攻爆jí腚メ/ 2022年06月08日 08:46/ 0 赞/ 304 阅读

相关 React定时内循环

import React, \{ Component \} from 'react'; import logo from './logo.svg'; import './A

怼烎@/ 2022年05月26日 10:06/ 0 赞/ 181 阅读

相关 react-9 state ， props 和 map 循环渲染的简单描述

之前简单学习了react 组件是怎么写的，比如下面这个： import React from 'react'; import './intro.css';

港控/mmm°/ 2022年03月18日 10:26/ 0 赞/ 423 阅读

相关解决React Native项目中setState在循环中不生效

一：问题描述 constructor (props) { super(props) this.state = {

蔚落/ 2022年03月16日 04:14/ 0 赞/ 496 阅读

相关 react 循环嵌套改变样式点击变色

react 循环嵌套改变样式点击变色借鉴：yx\_cos博主的[https://blog.csdn.net/yx\_cos/article/details/8249

水深无声/ 2022年01月05日 10:57/ 0 赞/ 393 阅读

相关 react 的死循环

在 componentWillUpdate 中通过 this.setState 修改状态值，可能会导致死循环，因为会调用 shouldComponentUpdate 可以通

「爱情、让人受尽委屈。」/ 2021年12月23日 12:17/ 0 赞/ 641 阅读