接：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
一、綁定狀態數據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）處為固定寫法，最好寫成：
constructor(props){ //用父子組件傳值props
super(props);
} - （2）處this.state={}，注意后面是“=”號不是其它
- （3）處，return內部 html標簽最外層只能有一個div，不能有多個，否則報錯
- （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
- 新聞列表。。。
- 新聞列表。。。
- 新聞列表。。。
二、綁定屬性
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綁定屬性注意：
- class要換成className
- 2. for要換成 htmlFor
- style:<div style={{"color":'red'}}>我是一個紅的的 div 行內樣式</div>
- 其他的屬性和以前寫法是一樣的
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被逐個循環顯示出來了：
列表使用注意點：
- 列表需要加key=xx，並且每個key不能一樣，否則報下列的警告信息。
