导航
导航
文章目录󰁋
  1. 一、数组遍历显示
  2. 二、ol与li的实现
  3. 三、从服务端获取数据
  4. 四、初始化STATE
  5. 五、解构与扩展操作符
  6. 六、创建组件
  7. 七、State/Props/PropTypes
  8. 七、当你构建通用容器时,扩展属性会非常有用
  9. 八、使用es6的计算属性代替

关注作者公众号

和万千小伙伴一起学习

公众号:前端进价之旅

es6在react中的应用

一、数组遍历显示

import React,{Component} from 'react';
class RepeatArray extends 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的实现

import React,{Component} from 'react';
class RepeatLi extends 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;

三、从服务端获取数据

import React,{Component} from 'react';
class UserGist extends 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 RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<UserGist source="https://api.github.com/users/octocat/gists" />
</div>
);
}
}
export default RepeatArray;

四、初始化STATE

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

五、解构与扩展操作符

在给子组件传递一批属性更为方便了。下面的例子把className以外的所有属性传递给div标签

class AutoloadingPostsGrid extends 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开发最常见的问题就是父组件要传给子组件的属性较多时比较麻烦

class MyComponent extends React.Component{
//假设MyComponent已经有了name和age属性
render(){
return (
<SubComponent name={this.props.name} age={this.props.age}/>
)
}
}

使用扩展操作符可以变得很简单

class MyComponent extends React.Component{
//假设MyComponent已经有了name和age属性
render(){
return (
<SubComponent {...this.props}/>
)
}
}

上述方式是将父组件的所有属性都传递下去,如果这其中有些属性我不需要传递呢?也很简单

class MyComponent extends React.Component{
//假设MyComponent有很多属性,而name属性不需要传递给子组件
var {name,...MyProps}=this.props;
render(){
return (
<SubComponent {...Myprops}/>
)
}
}

上述方法最常用的场景就是父组件的class属性需要被单独提取出来作为某个元素的class,而其他属性需要传递给子组件

六、创建组件

import React,{Component} from "react";
class MyComponent extends Component{
//组件内部代码
}

七、State/Props/PropTypes

es6允许将propspropTypes当作静态属性在类外初始化

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

es7支持直接在类中使用变量表达式

class MyComponent extends React.Component{
static defaultProps={
name:"SunnyChuan",
age:22
}
static propTypes={
name:React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
}
}
  • state和前两个不同,它不是静态的
class MyComponent extends 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 <Greeting firstName="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);
支持一下
扫一扫,支持poetries
  • 微信扫一扫
  • 支付宝扫一扫