5. 数组/列表渲染

src/App.js

@@ -6,7 +6,7 @@ function App() {
     // vue3 组合式 API
     // React 必须大写 Pascal 命名 组件
     function FnHello({name = "Fn"}) {
-        return <div>Hello world By {name}</div>
+        return <div key={name}>Hello world By {name}</div>
     }
 
     let com = FnHello({name: "obj"})
@@ -98,6 +98,7 @@ function App() {
         3
     ]
 
+    // 数组渲染
     let arr2 = [
         FnHello({name: "item1"}),
         FnHello({name: "item2"}),
@@ -158,9 +159,13 @@ function App() {
         <div className="App">
             <header className="App-header">
                 {/*<img src={logo} className="App-logo" alt="logo" />*/}
-                <FnHello/>
 
-                <FnHello2/>
+                {/*数组渲染*/}
+                {[
+                    // key 必须唯一
+                    <FnHello key={1}/>,
+                    <FnHello2 key={2}/>
+                ]}
 
                 <ClassHello/>