本文主要介紹了es6在react中的應用程式碼解析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下，希望能幫助大家更好理解和掌握es6在react中的應用。
不論是React還是React-native，facebook官方都推薦使用ES6的語法，沒在專案中使用過的話，突然轉換過來會遇到一些問題，如果還沒有時間系統的學習下ES6那麼注意一些常見的寫法暫時也就夠用的，這會為我們的開發帶來很大的便捷，你會體驗到ES6語法的無比簡潔。以下為大家介紹es6在react中的應用，具體內容如下所示：
import React,{Component} from 'react';
class RepeatArrayextends Component{
constructor() { super();
}
render(){
const names = ['Alice', 'Emily', 'Kate'];
return (
<p>
{
names.map((name) =>{return <p>Hello, {name}!</p>;} )
}
</p>
);
}
}
export default RepeatArray;登入後複製
二、ol與li的實作
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 (
<p>
<RepeatLi>
<span>hello</span>
<span>world</span>
</RepeatLi>
</p>
);
}
}
export default RepeatArray;登入後複製
三、從服務端取得資料
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(
<p>
{this.state.username} ..
<a href={this.state.lastGistUrl} >here</a>
</p>
);
}
}
class RepeatArrayextends Component{
constructor() {
super();
}
render(){
return (
<p>
<UserGist source="https://api.github.com/users/octocat/gists" />
</p>
);
}
}
export default RepeatArray;登入後複製
四、初始化STATE
class Videoextends React.Component{
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
};
}
}登入後複製
五、解構與擴充運算子
在給子元件傳遞一批屬性更為方便了。下面的範例把className 以外的所有屬性傳遞給p 標籤
class AutoloadingPostsGridextends React.Component{
render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (
<p className={className}>
<PostsGrid {...others} />
<button onClick={this.handleLoadMoreClick}>Load more</button>
</p>
);
}
}登入後複製
使用react 開發最常見的問題就是父元件要傳給子元件的屬性較多時比較麻煩
class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
render(){
return (
<SubComponent name={this.props.name} age={this.props.age}/>
)
}
}登入後複製
#使用擴充運算子可以變得很簡單
class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
render(){
return (
<SubComponent {...this.props}/>
)
}
}登入後複製
上述方式是將父元件的所有屬性都傳遞下去，如果這其中有些屬性我不需要傳遞呢？也很簡單
class MyComponentextends React.Component{
//假设MyComponent有很多属性，而name属性不需要传递给子组件
var {name,...MyProps}=this.props;
render(){
return (
<SubComponent {...Myprops}/>
)
}
}登入後複製
上述方法最常用的場景就是父元件的class 屬性需要被單獨提取出來作為某個元素的class ，而其他屬性需要傳遞給子元件
六、建立元件
import React,{Component} from "react";
class MyComponentextends Component{
//组件内部代码
}登入後複製
七、State/Props/PropTypes
es6 允許將props 和propTypes 當作靜態屬性在類別外初始化
class MyComponentextends React.Component{}
MyComponent.defaultProps={
name:"SunnyChuan",
age:22
};
MyComponent.propTypes={
name:React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
};登入後複製
es7 支援直接在類別中使用變數表達式
class MyComponentextends React.Component{
static defaultProps={
name:"SunnyChuan",
age:22
}
static propTypes={
name:React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
}
}登入後複製
state 和前兩者不同，它不是靜態的
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
}
}登入後複製
七、當你建立通用容器時，擴充屬性會非常有用
function App1(){
return <GreetingfirstName="Ben"lastName="Hector"/>;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}登入後複製
八、使用es6的計算屬性代替
this.setState({
[name]:value
})
//代替
var partialState = {};
partialState[name] = value;
this.setState(partialState);登入後複製
相關推薦：
#詳解在React 元件中使用Echarts的正確姿勢
#實例詳解React透過父元件傳遞類別名稱給子元件
React中元件的寫法有哪些
#
以上是實例詳解es6在react中的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
