React 串列 & Keys 簡單演示-有解無憂

使用 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();

將以上實體重構成一個組件，組件接收陣列引數，每個串列元素分配一個 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();

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();

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();

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/123534.html

標籤：JavaScript

上一篇：axios發送post form請求

下一篇：React 組件 API 簡單演示