React 列表渲染

第一種：將列表內容拼裝成陣列放置到模板中。

第二種：將資料拼裝成陣列的jsx物件。

import react from 'react';

import reactdom from 'react-dom';
let arr = ["小明", "小黑", "小白"];
let arrhtml = [小明,小黑,小白];
class welcome extends react.component 
render() 
}reactdom.render(
, // 渲染父元素
document.queryselector('#root') //尋找檔案物件
)

import react from 'react';

import reactdom from 'react-dom';
class welcome extends react.component ,,]
}} render() 
)listarr.push(item)
}return ()}}
reactdom.render(
, // 渲染父元素
document.queryselector('#root') //尋找檔案物件
使用陣列的map方法，對每一項資料按照jsx的形式進行加工，最終得到1個每一項都是jsx物件的陣列，然後將陣列渲染到模板中。key值需要放置到每一項中。
import react from 'react';

import reactdom from 'react-dom';
class welcome extends react.component ,,]
}} render() :)})
return ()}}
reactdom.render(
, // 渲染父元素
document.queryselector('#root') //尋找檔案物件
, // 渲染父元素
document.queryselector('#root') //尋找檔案物件
, // 渲染父元素
document.queryselector('#root') //尋找檔案物件
, // 渲染父元素
document.queryselector('#root') //尋找檔案物件
React基礎 列表渲染
doctype html en utf 8 viewport content width device width,initial scale 1.0 document title node modules react umd react.development.js script node mod...
react條件列表渲染
條件渲染 1.條件判斷 constructor props render else return 封裝到函式中 constructor props render gettitlejsx else return titlejsx 2.三元運算子class extends react.component...
React節點屬性，列表渲染
text babel const element active hello word h2 div reactdom.render element,document.queryselector script 即便是因為某些原因使其生效了，但是並不符合規範！text babel const eleme...