React 教程
在 React 中，您将使用某种类型的循环来渲染列表。
JavaScript map() 数组方法通常是首选方法。
如果您需要复习 map() 方法，请查看 ES6 部分。
实例:
让我们渲染车库里的所有汽车:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
运行实例 »
当您在 create-react-app 中运行此代码时，它会起作用，但您会收到一条警告，指出没有为列表提供"密钥" 项目。
Keys
Keys 键允许 React 跟踪元素。 这样，如果一个项目被更新或删除，只有该项目将被重新渲染，而不是整个列表。
每个同级的 Keys 键必须是唯一的。 但它们可以在全球范围内复制。
通常，密钥应该是分配给每个项目的唯一 ID。 作为最后的手段，您可以使用数组索引作为键。
实例:
让我们重构之前的示例以包含键:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);运行实例 »
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.3万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
36.2万人学习
独孤九贱(4)_PHP视频教程
共89课时
133.1万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载