欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React 列表 & Keys 简单演示

程序员文章站 2022-05-04 11:25:06
使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './ ......

使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import app from './app';
import * as serviceworker from './serviceworker';
import proptypes from 'prop-types';

const arr=[1,2,3,4,5];
const items=arr.map(val=>
  <li>{val}</li>
)

  reactdom.render(
    <div>
      <ul>
        {items}
      </ul>
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

React 列表 & Keys 简单演示

 

 

将以上实例重构成一个组件,组件接收数组参数,每个列表元素分配一个 key
不然会出现警告 a key should be provided for list items,意思就是需要包含 key

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import app from './app';
import * as serviceworker from './serviceworker';
import proptypes from 'prop-types';

function numlist(props){
  const arr=props.arr;
  const items=arr.map(val=>
    <li key={val.tostring()}>{val}</li>
  )

  return(
    <ul>{items}</ul>
  )
}

const arr=[11,22,33];
  reactdom.render(
    <div>
      <numlist arr={arr}/>
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

React 列表 & Keys 简单演示

 

 

keys 可以在 dom 中的某些元素被增加或删除的时候帮助 react 识别哪些元素发生了变化
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常使用来自数据的 id 作为元素的 key
当元素没有确定的 id 时,可以使用序列号索引 index 作为 key
如果列表可以重新排序,不建议使用索引来进行排序,因为这会导致渲染变得很慢

 

数组元素中使用的 key 在其兄弟之间应该是独一无二的。
然而,它们不需要是全局唯一的。当生成两个不同的数组时,可以使用相同的键。

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import app from './app';
import * as serviceworker from './serviceworker';
import proptypes from 'prop-types';

function blogs(props){
  const left=(
    <ul>
      {
        props.posts.map(val=>
          <li key={val.id}>{val.title}</li>
        )
      }
    </ul>
  )

  const right=props.posts.map(val=>
    <div key={val.id}>
      <h3>{val.title}</h3>
      <p>{val.content}</p>
    </div>
  )

  return(
    <div>
      {left}
      <hr/>
      {right}
    </div>
  )
}

const posts=[
  {id:1,title:'title1',content:'content1'},
  {id:2,title:'title2',content:'content2'}
];

  reactdom.render(
    <div>
      <blogs posts={posts}/>
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

React 列表 & Keys 简单演示

 

 

key 会作为给 react 的提示,但不会传递给组件。
如果组件中需要使用和 key 相同的值,需要作为属性传递

const content = posts.map((post) =>
  <post
    key={post.id}
    id={post.id}
    title={post.title} />
);

 

jsx 允许在大括号中嵌入任何表达式

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import app from './app';
import * as serviceworker from './serviceworker';
import proptypes from 'prop-types';

function numlist(props){
  const list=props.list;
  return(
    <ul>
    {list.map(val=>
      <li key={val.tostring()}>{val}</li>
    )}
    </ul>
  )
}

const lists=['a','b','c'];

  reactdom.render(
    <div>
      <numlist list={lists}/>
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

React 列表 & Keys 简单演示