React.js中常用的ES6写法总结

一 模块

1 引入模块以便使用

用import实现：

import '模块文件地址'
import 组件 from '模块文件地址'

import "./index.scss";
import ReactSwipe from 'react-swipe';
import axios from "axios";

2 导出模块

用export default实现：

export default class MyComponent extends Component{
  ...
}

引用：

import MyComponent from './MyComponent';

import React, { Component } from 'react';
import "./index.scss";
import ReactSwipe from 'react-swipe';
import axios from "axios";
class App extends Component {
}

export default App;

引入：

import App from "./components/App/index"; 

二 组件

1 定义组件

通过定义一个继承自React.Component的class来定义一个组件类：

class Photo extends React.Component {
  render() {
    ...
  }
}

2 定义组件方法

直接用名字(){},很像Java定义类方法的写法：

class Photo extends React.Component {
  componentWillMount() {
 
  }
  render() {
    return (
      <Image source={this.props.source} />
    );
  }
}

也可以另外一种例子：

import React, { Component } from 'react';
import "./index.scss";

class App extends Component {
   
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
               卖座卡相关内容

            </div>
        );
    }
}

export default App;

4 初始化STATE

在构造函数中初始化（这样可以根据需要做一些计算）：

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

四 解构与属性延展

结合使用ES6+的解构和属性延展，在给子组件传递一批属性更为方便了。下面的例子把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>
    );
  }
}

下面这种写法，则是传递所有属性的同时，用新的className值进行覆盖（{…this.props}写在前边）：

<div {...this.props} className="override">
  …
</div>

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

 

原文来自：http://www.jb51.net/article/113348.htm

 

reactJs组件this.props需要注意的几点

1、获取属性的值用的是this.props.属性名

2、创建的组件名称首字母必须大写。

3、为元素添加css的class时，要用className.

4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}

原文连接:http://www.51xuediannao.com/javascript/react_props.html