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')
          );
     
  • 相关阅读:
    PHP去除所有的空格
    PHP学习之分页类
    PHP学习之验证码类
    PHP学习之迭代生成器
    PHP学习之PHP trait解析
    PHP学习之PHP代码的优化
    PHP学习之PHP的语法糖
    PHP学习之PHP编码习惯
    PHP介绍
    Centos7安装PHP、安装MySQL、安装apache
  • 原文地址:https://www.cnblogs.com/gopark/p/12292564.html
Copyright © 2011-2022 走看看