4、React建立組件、 JSX使用、綁定數據、引用圖片方式、數組（列表）循環輸出

接：https://www.cnblogs.com/chenxi188/p/11702799.html

用上節建好的my-app項目：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

1、綁定狀態數據state

1.在src目錄下新建一個componets，用來放【本身創建的組件】、【引入react寫法1】：

在components文件夾下，新建一個組件：【home.js】輸入以下內容：注：（2）創建state數據（3）綁定state數據

import React,{Component} from 'react';  //（0）【引入組件第一種寫法】

class Homes extends Component{         //(0-1)對應第一種引入react引入方法類寫法 //（1）接下來兩行爲固定寫法
    constructor(){
        super();
        
                //（2）如下幾行爲創建一個組件狀態數據
        this.state={
         name:"Alice",
         age:20,
         sex:"女",
         userinfo:{username:'sky'}
        }
    }
        
    render(){

                //（3）下面的this.state.xxx爲把狀態數據綁定到前端
        return(
            <div>
                <h2>這裏是Home.js組件</h2>
                <p>個人名字是：{this.state.name}</p>
                <p>個人年齡是：{this.state.age}</p>
                <p>個人性別是：{this.state.sex}</p>
                <p>個人用戶名：{this.state.userinfo.username}</p>
            </div>
               );        
    }
};

export default Homes;

建立組件注意事項：

         0.  組件名Home首字母必須大寫，不然不報錯，但內容也不會顯示出來

1. （1）處爲固定寫法，最好寫成：

   constructor(props){ //用父子組件傳值props
   super(props);
   }

2. （2）處this.state={}，注意後面是「=」號不是其它
3. （3）處，return內部 html標籤最外層只能有一個div，不能有多個，不然報錯
4. （3）處，的html標籤必須有封閉符號 /,如<br>錯誤，必須寫成<br />

 

2.而後把【APP.js根組件】改爲以下【引入react寫法二】（A）（B）：

import React from 'react'; //（A）引入react寫法二
import logo from './logo.svg';
import './App.css';

//從components文件夾下引入寫好的Home.js組件，.js可省略
import Homes from './components/Home';

class App extends React.Component { //（B）對應引入寫法二類寫法 //如下的<Homes />爲把home時寫好的組件引用過來
  render (){
    return(
    <div className="App">
     <h1>這裏是app.js根組件</h1>
     
     <Homes />
    </div>
    );}
}


export default App;

3.運行：回到my-app項目裏在cmd運行代碼，啓動項目查看效果

npm start

運行效果：

 3.再作個新聞組件練練手

1.在components目錄下新建News.js

import React,{Component} from 'react';

class News extends Component{
    constructor(){
        super();
    }

    render(){
        return(
            <div>
                <ul>
                    <li>新聞列表。。。</li>
                    <li>新聞列表。。。</li>
                    <li>新聞列表。。。</li>
                </ul>
            </div>
            );
    }
}
export default News;

2.回到App.js里加載News組件：

import React, { Component } from 'react';
import logo from './logo.svg';
//import './App.css';   //把css樣式註釋掉，解除全部文本居中問題

//從components文件夾下引入Home.js
import Homes from './components/Home';
import News from './components/News'; //引入News組件

class App extends Component {

  render (){
//用<News/>把組件顯到前端
    return(
    <div className="App">
     <h1>這裏是app.js根組件</h1>
     
     <Homes />
     <News />
    </div>
    );}
}


export default App;

刷新：http://localhost:3000/

顯示以下：

這裏是app.js根組件

這裏是Home.js組件

個人名字是：Alice

個人年齡是：20

個人性別是：女

個人用戶名：sky

• 新聞列表。。。
• 新聞列表。。。
• 新聞列表。。。

2、綁定屬性

1.首先把Home.js裏內容改爲：

import React,{Component} from 'react';

import '../index.css'; //【1】引入css--在index.css裏寫一個樣式

class Homes extends Component{
    //下3行固定寫法
    constructor(props){
        super(props);
        this.state={
        
        //【2】red名源自index.css裏的.red樣式定義
         red:'red',
         hello:'hello',

         //【5】直接在state內部寫style樣式
          blue_40:{
          color:'blue',
          fontSize:'40px'
             }

        }
    }
    render(){
        //【3】className=class由於css的class和js的class衝突，因此css裏class=className、另外還有一個for=htmlFor
        //h2以後的{this.state.xxx}爲綁定屬性，此處是綁定一個樣式
        //p裏綁定的title，鼠標移上去將顯示hello
        return(
            <div>
                <h2 className={this.state.red}>這裏是Home.js組件</h2>
                <p title={this.state.hello}>hello!</p>

                   {
                   //此處htmlFor做用：點姓名會選中後面的輸入框
                    }
                 <label htmlFor='name'>姓名：</label><input id='name' />

               

          {
           //行內樣式寫法
           }
            <p style={{"color":"green"}}>此處行內樣式寫的</p>

            </div>

       {
        //【5】引入在state裏定義的樣式
      }
          <p style={this.state.blue_40}>這裏是state定義樣式</p>

    );        
    }
};

export default Homes;

react綁定屬性注意：

1. class要換成className
2. 2. for要換成 htmlFor
3. style:<div style={{"color":'red'}}>我是一個紅的的 div 行內樣式</div>
4. 其餘的屬性和之前寫法是同樣的

2.到App.js裏引入Home組件便可刷新顯示結果：

---

 

2. 引入圖片方法

Home.js裏：

import React,{Component} from 'react';
import logo from '../logo.svg'; //方法1引入圖片前準備，後面將用src={logo}引入
import '../index.css'

class Homes extends Component{
    //下3行固定寫法
    constructor(props){
        super(props);
        this.state={
            msg:'下面將是一個圖片兩個示例：',
            home_style:'home_style'
        
        }
    }
    //render裏用jsx
    render(){
        //div的className也可直接寫類名className='home_style'，就不用在state裏定義數據了
        return(

            <div className={this.state.home_style}>
             <p>{this.state.msg}</p>
                {
                    /*1.引入圖片 首先要在頂部引入圖片 impor ....
                      2.直接用require函數引入圖片，不在頂部寫引入方式
                      3.直接引入網絡圖片,圖片寬度在index.css定義
                    */
                }
                <img src={logo} />
                <img src={require('../logo.svg')} />
                <img src="https://www.baidu.com/img/bd_logo1.png" />
            </div>
    );        
    }
};

export default Homes;

App.js裏：

import React, { Component } from 'react';
import logo from './logo.svg';
//import './App.css';
//從components文件夾下引入Home.js
import Homes from './components/Home';
import News from './components/News';

class App extends Component {

  render (){
    return(
    <div className="App">
     <h1>這裏是app.js根組件</h1>
     
     <Homes />
     <News />
    </div>
    );}
}


export default App;

 index.css

.home_style img{
    width: 300px;

}

結果：將展現3個圖片

---

 

 3.數組（列表）用法

Home.js：

import React,{Component} from 'react';
import logo from '../logo.svg'; //引入圖片
import '../index.css'

class Homes extends Component{
    //下3行固定寫法
    constructor(props){
        super(props);
        this.state={
            msg:'下面將是一個列表示例：',
            //【注意】若是是html列表，不能加引號，不然將以文本處理 【注意key必需要加個不同的值，不然控制檯有警告信息】
            list1:[<h2 key='1'>列表的h2_1</h2>,<h2 key='2'>列表的h2_2</h2>],
            //下面這個list將用.map()函數處理，實現循環
            list2:['aaa','bbb','ccc','ddd','eee']

              list3:[
                    {name:"list3_111"},
                    {name:"list3_222"},
                    {name:"list3_333"},
                    {name:"list3_444"}
                     ]

        }
    }
    //render裏用jsx
    render(){
        //用map()函數處理list2列表 【key={key} 不加，會在console出警告】
        let list_result=this.state.list2.map(function(value,key){
            return <li key={key}>{value}</li>
        });
        
        return(

            <div className={this.state.home_style}>
             <p>{this.state.msg}</p>
                { /*
                //列表1將直接引用state，會自動循環內部內容
                //此處不用this.state,由於它不在construct構造函數內
                */ }
                {this.state.list1}
                {list_result}

                  {
                  //list3用直接在代碼塊內寫js方式處理列表中的對象
                  this.state.list3.map(function(value,key){
                  return <li key={key}> {value.name} </li>
                 })
                 }

</div>
    );        
    }
};

export default Homes;

App.js不變，略過……，刷新便可看到llist被逐個循環顯示出來了：

列表使用注意點：

1. 列表須要加key=xx，而且每一個key不能同樣，不然報下列的警告信息。