之前的文章我們介紹了 React 建立元件、JSX 語法、繫結資料和繫結物件。接下來我們將介紹 React 繫結屬性( 繫結class  繫結style)、引入圖片  迴圈陣列渲染資料。

上一篇中我們在 components 目錄中建立了 Home.js 元件並將其掛在到了 App.js 的根組建中，接下來我們接著在 Home 元件中進行操作。 

 1 import React, {Component} from 'react';
 2 import img from '../static/img/react.jpg';
 3 
 4 class Home extends Component {
 5     constructor(props) {
 6         super(props);
 7         this.state = {
 8             name: "zhangsan",
 9             title: "this is a title",
10             className: "home_title",
11             style: {
12                 color: "red",
13                 fontSize: "30px"
14             },
15             list: ["aaa", "bbb", "ccc"]
16         }
17     }
18 
19     render() {
20         return (
21             <div>
22                 <p
23                     title={this.state.title}
24                     className={this.state.className}
25                     style={this.state.style}
26                 >
27                     Hello {this.state.name}
28                 </p>
29 
30                 <div>
31                     <label htmlFor="name">
32                         <input type="text" id="name"/>
33                     </label>
34                 </div>
35 
36                 <img style={{width: "150px"}} src={img} alt=""/>
37                 <img style={{width: "120px"}} src={require('../static/img/react.jpg')} alt=""/>
38 
39                 <ul style={{color: "green"}}>
40                     {this.state.list.map((val, key) => {
41                         return (<li key={key}>{val}</li>)
42                     })}
43                 </ul>
44 
45             </div>
46         );
47     }
48 }
49 
50 export default Home;

以上程式碼中我們需要注意的是：

* 繫結的資料要放在 this.state 中，

* HTML 的 class 類名改成 className，

* label 中 for 屬性改成 htmlFor，

* 行內樣式 style 的寫法為 {{ }}，

* 圖片 img 的引入方式：

　　1、通過模組的方式引入：

　　import img from '../static/img/react.jpg';

　　<img style={{width:"150px"}} src={img} alt=""/>

　　2、通過 require 的方式引入：

　　<img style={{width:"120px"}} src={require('../static/img/react.jpg')} alt=""/>

* 陣列資料利用迴圈的形式進行輸出，需要注意的是每一個輸出 HTML 中都要指定一個 key 值。　

最後的執行結果為：

&n