React 入门

练习 1 前往 React 入门教程

React ES6 箭头函数

练习 1 前往 React ES6 箭头函数教程

React ES6 变量

练习 1 前往 React ES6 变量教程

React ES6 数组方法

练习 1 前往 React ES6 数组方法教程

React ES6 解构

练习 1 练习 2 前往 React ES6 解构教程

React ES6 扩展

练习 1 前往 React ES6 扩展教程

React ES6 三元运算符

练习 1 前往 React ES6 三元运算教程

React JSX

练习 1 练习 2 练习 3 练习 4 前往 React JSX 教程

React 组件

练习 1 练习 2 前往 React 组件教程

React 属性

练习 1 前往 React 属性教程

React 事件

练习 1 前往 React 事件教程

React 条件

练习 1 前往 React 条件教程

React 列表

练习 1 前往 React 列表教程

React 钩子 useState

练习 1 前往 React 钩子 useState 教程

React 钩子 useEffect

练习 1 前往 React 钩子 useEffect 教程

React CSS 样式

练习 1 练习 2 练习 3 练习 4 前往 React CSS 样式教程

×

×

正确

练习：

添加允许 React 跟踪列表中元素的属性。

function GroceryList() { const items = [ {id: 1, name: 'bread'}, {id: 2, name: 'milk'}, {id: 3, name: 'eggs'} ]; return ( <> <h1>Grocery List</h1> <ul> {items.map((item) => <li key={item.id}>{item.name}</li>)} </ul> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<GroceryList />);

不正确

点击此处重试

正确

下一题 ❯

function GroceryList() {
  const items = [
    {id: 1, name: 'bread'},
    {id: 2, name: 'milk'},
    {id: 3, name: 'eggs'}
  ];

  return (
    <>
      <h1>Grocery List</h1>
      <ul>
        {items.map((item) => <li w3exercise_input_no_0
={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<GroceryList />);