React 从入门到进阶之路（三）

之前的文章我们介绍了 React 创建组件、JSX 语法、绑定数据和绑定对象。接下来我们将介绍 React 绑定属性( 绑定class  绑定style)、引入图片  循环数组渲染数据。

上一篇中我们在 components 目录中创建了 Home.js 组件并将其挂在到了 App.js 的根组建中，接下来我们接着在 Home 组件中进行操作。

 import React, {Component} from 'react';
 import img from '../static/img/react.jpg';

 class Home extends Component {
     constructor(props) {
         super(props);
         this.state = {
             name: "zhangsan",
             title: "this is a title",
             className: "home_title",
             style: {
                 color: "red",
                 fontSize: "30px"
             },
             list: ["aaa", "bbb", "ccc"]
         }
     }

     render() {
         return (
             <div>
                 <p
                     title={this.state.title}
                     className={this.state.className}
                     style={this.state.style}
                 >
                     Hello {this.state.name}
                 </p>

                 <div>
                     <label htmlFor="name">
                         <input type="text" id="name"/>
                     </label>
                 </div>

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

                 <ul style={{color: "green"}}>
                     {this.state.list.map((val, key) => {
                         return (<li key={key}>{val}</li>)
                     })}
                 </ul>

             </div>
         );
     }
 }

 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 值。　

最后的运行结果为：