React 列表 & Keys 简单演示
发布时间:2020-12-15 09:29:41 所属栏目:百科 来源:网络整理
导读:使用 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 PropType
使用 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 import React,1)">; 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>,1)">) ); serviceWorker.unregister(); ? ? Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化 ? 数组元素中使用的 key 在其兄弟之间应该是独一无二的。 import React,1)"> 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> ( <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>,1)">) ); serviceWorker.unregister(); ? ? key 会作为给 React 的提示,但不会传递给组件。 const content = posts.map((post) => <Post key={post.id} id={post.id} title={post.title} /> ); ? JSX 允许在大括号中嵌入任何表达式 import React,1)"> NumList(props){ const list=props.list; {list.map(val=> <li key={val.toString()}>{val}</li> )} </ul> ) } const lists=['a','b','c']; ReactDOM.render( <div> <NumList list={lists}/> </div>,1)">) ); serviceWorker.unregister(); ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读