不论是React还是React-native，facebook官方都推荐使用ES6的语法，没在项目中使用过的话，突然转换过来会遇到一些问题，如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的，这会给我们的开发带来很大的便捷，你会体验到ES6语法的无比简洁。下面给大家介绍es6在react中的应用，具体内容如下所示：
rush:js;">
import React,{Component} from 'react';
class RepeatArrayextends Component{
constructor() { super();
}
render(){
const names = ['Alice','Emily','Kate'];
return (
{
names.map((name) =>{return
);
}
}
export default RepeatArray;
Hello,{name}!
;} )
}
二、ol与li的实现
rush:js;">
import React,{Component} from 'react';
class RepeatLiextends Component{
render(){
return (
hello
world
);
}
}
export default RepeatArray;
-
{
this.props.children.map((child)=>{return
- {child} }) }
三、从服务端获取数据
rush:js;">
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(
{this.state.username} ..
here
);
}
}
class RepeatArrayextends Component{
constructor() {
super();
}
render(){
return (
四、初始化STATE
rush:js;">
class Videoextends React.Component{
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,};
}
}
五、解构与扩展操作符
在给子组件传递一批属性更为方便了。下面的例子把 className 以外的所有属性传递给 div 标签
rush:js;">
class AutoloadingPostsGridextends React.Component{
render() {
var {
className,...others,// contains all properties of this.props except for className
} = this.props;
return (
使用 react 开发最常见的问题就是父组件要传给子组件的属性较多时比较麻烦
rush:js;">
class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
render(){
return (
)
}
}
使用扩展操作符可以变得很简单
rush:js;">
class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
render(){
return (
上述方式是将父组件的所有属性都传递下去，如果这其中有些属性我不需要传递呢？也很简单
rush:js;">
class MyComponentextends React.Component{
//假设MyComponent有很多属性，而name属性不需要传递给子组件
var {name,...MyProps}=this.props;
render(){
return (
上述方法最常用的场景就是父组件的 class 属性需要被单独提取出来作为某个元素的 class ，而其他属性需要传递给子组件
六、创建组件
rush:js;">
import React,{Component} from "react";
class MyComponentextends Component{
//组件内部代码
}
七、State/Props/PropTypes
es6 允许将 props 和 propTypes 当作静态属性在类外初始化
rush:js;">
class MyComponentextends React.Component{}
MyComponent.defaultProps={
name:"SunnyChuan",age:22
};
MyComponent.propTypes={
name:React.PropTypes.string.isrequired,age:React.PropTypes.number.isrequired
};
es7 支持直接在类中使用变量表达式
rush:js;">
class MyComponentextends React.Component{
static defaultProps={
name:"SunnyChuan",age:22
}
static propTypes={
name:React.PropTypes.string.isrequired,age:React.PropTypes.number.isrequired
}
}
state 和前两个不同，它不是静态的
rush:js;">
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
}
}
七、当你构建通用容器时，扩展属性会非常有用
rush:js;">
function App1(){
return irstName="Ben"lastName="Hector"/>;
}
function App2() {
const props = {firstName: 'Ben',lastName: 'Hector'};
return
八、使用es6的计算属性代替
rush:js;">
this.setState({
[name]:value
})
//代替
var partialState = {};
partialState[name] = value;
this.setState(partialState);
总结
以上所述是小编给大家介绍的es6在react中的应用代码解析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
