列表渲染

1.使用map函式來遍歷實現列表渲染。

簡單的例子：

let list = {
	"列表1",
	"列表2",
	"列表3",
	// .....
}
ReactDOM.render(
	<ul>
		{ list.map(item=><li>{item}</li>) }
	</ul>
);

輸出的結果為：

<ul>
	<li>列表1</li>
	<li>列表2</li>
	<li>列表3</li>
</
 
ul>

這裡利用 React 中的 jsx 可以插入陣列的特效，利用陣列在這裡進行批量渲染。
在開發環境下用肯會有一個 key 的問題。

2.較複雜點的例子：

<Select
	defaultValue="請選擇"
	style={{ width: 120 }}
	onChange={watersParameter}
	>
	{waters.map((data, key) => (
		<Option value={key}>{data}</Option>
	))}
</Select>

實現的效果：