React學習之JSX與react事件例項分析

阿新 • • 發佈：2020-01-09

本文例項講述了React學習之JSX與react事件。分享給大家供大家參考，具體如下：

1、JSX

1.1、表示式

在React中使用JSX來描述HTML頁面，而且可以與js混合使用，使用JavaScript表示式時要將表示式包含在大括號裡

const user = {
 firstName: 'Harper',lastName: 'Perez'
};
const element = (    //將JSX語句儲存在變數中
 <h1>
  Hello,{formatName(user)}!  {/* {}中寫js語句*/}
 </h1>
);

在編譯之後呢，JSX 其實會被轉化為普通的 JavaScript 物件，可以對其賦值或把它當作引數傳遞：

ReactDOM.render(
 element,//通過JSX變數渲染react節點
 document.getElementById('root')
);

1.2、屬性

JSX中可以像HTML中一樣使用"字串"的屬性，也可以使用{表示式}屬性：

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

注意：

1、React DOM 使用 camelCase 小駝峰命名來定義屬性的名稱，而不是使用 HTML 的屬性名稱。例如font-size要改為fontSize。

2、HTML中的保留字不能用於js中，例如class，應改為className：

const ele= <div className="red">Red Color</div>

3、JSX中行內樣式style需要用一個物件返回，而不是字串：

const ele=<div style="color:red">Red</div>     //會報錯
const ele= <div style={{color:'red'}}>Red</div>

{{color:red}}中第一個大括號代表這是一個js表示式，第二個代表這是一個用大括號引起的物件

1.3、巢狀

如果 JSX 標籤是閉合式的，那麼需要在結尾處用 />：

const element = <img src={user.avatarUrl} />;

jJSX內含多個標籤時，返回時需要在最外面用一個div把它們包起來：

const element = (
 <div>
  <h1>Hello!</h1>
  <h2>Good to see you here.</h2>
 </div>
);

1.4、註釋

在jsx中的註釋要單獨佔一行，且用大括號包起來，例如：{/*註釋*/}，否則有可能會被當成普通文字，引起錯誤。

2、事件

react事件的繫結採用駝峰寫法onClick={this.function}

例如定義一個切換ON/OFF的函式shiftFlag：

class Toggole extends React.Component{
 constructor(props){
  super(props);
  this.state={
   flag:true
  };
  this.shiftFlag=this.shiftFlag.bind(this);   //函式shiftFlag繫結this
 }
 shiftFlag(e){
  e.preventDefault();
  this.setState({
   flag:!this.state.flag
  });
 }
 render(){
  return <a href="#" rel="external nofollow" onClick={this.shiftFlag}>{this.state.flag?'ON':'OFF'}</a>
 }
}

注：

1、類的方法預設是不會繫結this的，直接在方法shiftFlag中使用this會報錯this is undefined，因此需要為shiftFlag繫結this。

2、e是一個事件引數，使用e.preventDefault()方法來阻止a標籤的預設跳轉行為。

react事件引數的傳遞通過繫結來實現，在傳遞時，繫結的this在前，引數在後。在定義函式時，事件物件e要放在最後，例如定義一個setName函式修改name為傳入的引數：

class Name extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:'default'
  }
 }
 setName(name,e){   //事件e放在最後
  this.setState({
   name:name
  })
 }
 render(){
  return <button onClick={this.setName.bind(this,'tory')}>{this.state.name}</button>
 }
}

希望本文所述對大家React程式設計有所幫助。