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

更新時間：2020年01月06日 10:14:11 作者：theVicTory

這篇文章主要介紹了React學習之JSX與react事件,結合實例形式分析了React中JSX表達式、屬性、嵌套與react事件相關使用技巧,需要的朋友可以參考下

本文實例講述了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節(jié)點
 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程序設計有所幫助。

您可能感興趣的文章:

react-player實現視頻播放與自定義進度條效果
本篇文章通過完整的代碼給大家介紹了react-player實現視頻播放與自定義進度條效果，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2022-01-01
詳解使用WebPack搭建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
使用React實現輪播效果組件示例代碼
React剛出來不久，組件還比較少，不像jquery那樣已經有很多現成的插件了，于是自己寫了一個基于React的輪播效果組件，現在分享給大家，有需要的可以參考借鑒。
2016-09-09
react:swr接口緩存案例代碼
useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數據來實現 React 的數據獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧
2023-11-11
React傳遞參數的幾種方式
本文詳細的介紹了React傳遞參數的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-06-06
一起來了解React的Hook
這篇文章主要為大家詳細介紹了React的Hook，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
淺析history 和 react-router 的實現原理
react-router 版本更新非常快,但是它的底層實現原理確是萬變不離其中,在本文中會從前端路由出發(fā)到 react-router 原理總結與分享,本文對history 和 react-router實現原理講解的非常詳細,需要的朋友跟隨小編一起看看吧
2023-08-08
react項目中如何引入國際化
在React項目中引入國際化可以使用第三方庫來實現，本文主要介紹了react項目中如何引入國際化，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
簡談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
2019-06-06
React實現父組件調用子組件的兩種寫法
react通信分很多種,比如：父子通信,兄弟通信等等,這里我們就簡單說一下父子通信,父子通信分為：父組件調用子組件里面的方法；子組件調用子組件里面的方法,這里我們著重說一下父組件調用子組件,需要的朋友可以參考下
2024-04-04