React 循环

最新推荐文章于 2024-04-13 03:59:56 发布

林中明月间。

最新推荐文章于 2024-04-13 03:59:56 发布

阅读量1.7k

点赞数

分类专栏： React.js

本文链接：https://blog.csdn.net/a772116804/article/details/110846006

版权

React.js 专栏收录该内容

11 篇文章 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>