本篇文章為大家展示了es6怎么在react中使用，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、達(dá)孜網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為達(dá)孜等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

具體內(nèi)容如下所示：

import React,{Component} from 'react';
class RepeatArrayextends Component{
 constructor() {  super();
 }
 render(){
  const names = ['Alice', 'Emily', 'Kate'];
  return (
   <div>
   {
    names.map((name) =>{return <div>Hello, {name}!</div>;} )
   }
   </div>
);
}
}
export default RepeatArray;

二、ol與li的實(shí)現(xiàn)

import React,{Component} from 'react';
class RepeatLiextends Component{
 render(){
  return (
   <ol>
   {
    this.props.children.map((child)=>{return <li>{child}</li>})
   }
   </ol>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<RepeatLi>
<span>hello</span>
    <span>world</span>
</RepeatLi>
   </div>
);
}
}
export default RepeatArray;

三、從服務(wù)端獲取數(shù)據(jù)

import React,{Component} from 'react';
class UserGistextends Component{
 constructor(){
  super();
  this.state={
   username:'',
   lastGistUrl:''
  }
 }
 componentWillMount(){
  $.get(this.props.source, function(result){
   var lastGist = result[0];
   //if (this.isMounted()) {
    this.setState({
     username: lastGist.owner.login,
     lastGistUrl: lastGist.html_url
    });
   //}
  }.bind(this));
 }
 render(){
  return(
   <div>
    {this.state.username} ..
    <a href={this.state.lastGistUrl} >here</a>
</div>
  );
 }
}
class RepeatArrayextends Component{
 constructor() {
  super();
 }
 render(){
  return (
   <div>
   <UserGist source="https://api.github.com/users/octocat/gists" />
   </div>
);
}
}
export default RepeatArray;

四、初始化STATE

class Videoextends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
  }
}

五、解構(gòu)與擴(kuò)展操作符

在給子組件傳遞一批屬性更為方便了。下面的例子把 className 以外的所有屬性傳遞給 div 標(biāo)簽

class AutoloadingPostsGridextends React.Component{
  render() {
    var {
      className,
      ...others, // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
</div>
    );
  }
}

使用 react 開(kāi)發(fā)最常見(jiàn)的問(wèn)題就是父組件要傳給子組件的屬性較多時(shí)比較麻煩

class MyComponentextends React.Component{
//假設(shè)MyComponent已經(jīng)有了name和age屬性
 render(){
  return (
   <SubComponent name={this.props.name} age={this.props.age}/>
   )
 }
}

使用擴(kuò)展操作符可以變得很簡(jiǎn)單

class MyComponentextends React.Component{
//假設(shè)MyComponent已經(jīng)有了name和age屬性
 render(){
  return (
   <SubComponent {...this.props}/>
   )
 }
}

上述方式是將父組件的所有屬性都傳遞下去，如果這其中有些屬性我不需要傳遞呢？也很簡(jiǎn)單

class MyComponentextends React.Component{
//假設(shè)MyComponent有很多屬性，而name屬性不需要傳遞給子組件
 var {name,...MyProps}=this.props;
 render(){
  return (
   <SubComponent {...Myprops}/>
   )
 }
}

上述方法最常用的場(chǎng)景就是父組件的 class 屬性需要被單獨(dú)提取出來(lái)作為某個(gè)元素的 class ，而其他屬性需要傳遞給子組件

六、創(chuàng)建組件

import React,{Component} from "react";
class MyComponentextends Component{
//組件內(nèi)部代碼
}

七、State/Props/PropTypes

es6 允許將 props 和 propTypes 當(dāng)作靜態(tài)屬性在類外初始化

class MyComponentextends React.Component{}
MyComponent.defaultProps={
 name:"SunnyChuan",
 age:22
};
MyComponent.propTypes={
 name:React.PropTypes.string.isRequired,
 age:React.PropTypes.number.isRequired
};

es7 支持直接在類中使用變量表達(dá)式

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}

state 和前兩個(gè)不同，它不是靜態(tài)的

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 state={
   isMarried:false
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}

七、當(dāng)你構(gòu)建通用容器時(shí)，擴(kuò)展屬性會(huì)非常有用

function App1(){
 return <GreetingfirstName="Ben"lastName="Hector"/>;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
 return <Greeting {...props} />;
}

八、使用es6的計(jì)算屬性代替

this.setState({
  [name]:value
})
//代替
var partialState = {};
partialState[name] = value;
this.setState(partialState);

上述內(nèi)容就是es6怎么在react中使用，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：es6怎么在react中使用-創(chuàng)新互聯(lián)
URL標(biāo)題：http://m.newbst.com/article40/doddho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、關(guān)鍵詞優(yōu)化、外貿(mào)建站、營(yíng)銷型網(wǎng)站建設(shè)、定制開(kāi)發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)