React中JSX與react事件的示例分析

小編給大家分享一下React中JSX與react事件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、JSX

1.1、表達(dá)式

在React中使用JSX來(lái)描述HTML頁(yè)面，而且可以與js混合使用，使用JavaScript表達(dá)式時(shí)要將表達(dá)式包含在大括號(hào)里

const user = {
 firstName: 'Harper',
 lastName: 'Perez'
};
const element = (    //將JSX語(yǔ)句保存在變量中
 <h2>
  Hello, {formatName(user)}!  {/* {}中寫(xiě)js語(yǔ)句*/}
 </h2>
);

在編譯之后呢，JSX 其實(shí)會(huì)被轉(zhuǎn)化為普通的 JavaScript 對(duì)象，可以對(duì)其賦值或把它當(dāng)作參數(shù)傳遞：

ReactDOM.render(
 element,        //通過(guò)JSX變量渲染react節(jié)點(diǎn)
 document.getElementById('root')
);

1.2、屬性

JSX中可以像HTML中一樣使用"字符串"的屬性，也可以使用{表達(dá)式}屬性：

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

注意：

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

2、HTML中的保留字不能用于js中，例如class，應(yīng)改為className：

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

3、JSX中行內(nèi)樣式style需要用一個(gè)對(duì)象返回，而不是字符串：

const ele=<div >Red</div>     //會(huì)報(bào)錯(cuò)
const ele= <div style={{color:'red'}}>Red</div>

{{color:red}}中第一個(gè)大括號(hào)代表這是一個(gè)js表達(dá)式，第二個(gè)代表這是一個(gè)用大括號(hào)引起的對(duì)象

1.3、嵌套

如果 JSX 標(biāo)簽是閉合式的，那么需要在結(jié)尾處用 />：

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

jJSX內(nèi)含多個(gè)標(biāo)簽時(shí)，返回時(shí)需要在最外面用一個(gè)div把它們包起來(lái)：

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

1.4、注釋

在jsx中的注釋要單獨(dú)占一行，且用大括號(hào)包起來(lái)，例如：{/*注釋*/}，否則有可能會(huì)被當(dāng)成普通文本，引起錯(cuò)誤。

2、事件

react事件的綁定采用駝峰寫(xiě)法onClick={this.function}

例如定義一個(gè)切換ON/OFF的函數(shù)shiftFlag：

class Toggole extends React.Component{
 constructor(props){
  super(props);
  this.state={
   flag:true
  };
  this.shiftFlag=this.shiftFlag.bind(this);   //函數(shù)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、類(lèi)的方法默認(rèn)是不會(huì)綁定this的，直接在方法shiftFlag中使用this會(huì)報(bào)錯(cuò)this is undefined，因此需要為shiftFlag綁定this。

2、e是一個(gè)事件參數(shù)，使用e.preventDefault()方法來(lái)阻止a標(biāo)簽的默認(rèn)跳轉(zhuǎn)行為。

react事件參數(shù)的傳遞通過(guò)綁定來(lái)實(shí)現(xiàn)，在傳遞時(shí)，綁定的this在前，參數(shù)在后。在定義函數(shù)時(shí)，事件對(duì)象e要放在最后，例如定義一個(gè)setName函數(shù)修改name為傳入的參數(shù)：

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中JSX與react事件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！