zoukankan      html  css  js  c++  java
  • 7、ReactJs基础知识07--列表渲染 & Key

    思路:使用map函数将数组转化成列表,map函数是返回一个新的数组,并不会改变原来的数组

    并且react在渲染数组时,会将元素拼接进行渲染,所以会将数组展开渲染

    1、通过使用 {} 在 JSX 内构建一个元素集合。
          const numbers = [1, 2, 3, 4, 5];
          const listItems = numbers.map((number,index) =>
            <li key={index}>{number}</li>
          );
    2、基础组件列表
    key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
    key设置的位置:在 map() 方法中的元素需要设置 key 属性。
        function NumberList(props) {
            const numbers = props.numbers;
            const listItems = numbers.map((number,index) =>
              <li key={index}>{number}</li>
            );
            return (
              <ul>{listItems}</ul>
            );
          }
    key 只是在兄弟节点之间必须唯一
    key 会传递信息给 React ,但不会传递给你的组件。如果你的组件中需要使用 key 属性的值,请用其他属性名显式传递这个值
    3、在 JSX 中嵌入 map(),即在{}中使用map表达式
        ReactDOM.render(
            {data.map((post) =>
              <li key={post}>
                {post}
              </li>
            )},
            document.getElementById('root')
          );
     
  • 相关阅读:
    3、面向对象
    今日记事
    javascript 学习javascript高级程序设计
    数据库操作语言分类
    project遇到问题了。
    CentOS设置程序开机自启动的方法
    ECMAScript 基础 [完]
    CentOS 网络设置修改
    Spring Boot项目Circular view path问题解决
    数据库设计
  • 原文地址:https://www.cnblogs.com/gopark/p/12292564.html
Copyright © 2011-2022 走看看