caasih.net

用 ES6 寫 React Component

現在的案子已經靠 Babel (之前叫做 6to5 ) ,使用 ES6 寫 React(0.12.0) Component 。

用到的特性有:

最後交給 webpack 打包,細節就不詳述。

所以現在是怎麼寫 React Component 的?

以麵包屑為例,一開始先為 component 打個骨架:

import React from 'react';

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

export default Breadcrumbs;

現在這個 Breadcrumbs 啥也不做,只是一個 <nav /> 標籤。使用 ES6 的 importexport ,而不是 var React = require('react')module.exports = Breadcrumbs 。在 ES6 的 Enhanced Object Literals 幫助下,可以少打幾個字,而不用寫:

{
  render: function () {
    return <nav />;
  }
}

接著把缺少的部分補上:

import React from 'react';

var Breadcrumbs = React.createClass({
  render() {
    return (
      <nav className="breadcrumbs">
        <a href="index.html">Home</a>
        <span><span className="divider">›</span>React</span>
        <span><span className="divider">›</span>About</span>
      </nav>
    );
  }
});

export default Breadcrumbs;

接著希望它能發揮麵包屑該有的功能,於是在 props 裡給出現在的路徑:

import React from 'react';

var Breadcrumbs = React.createClass({
  getDefaultProps() {
    return {
      path: ['React', 'About'];
    };
  },
  render() {
    var { path } = this.props;
    return (
      <nav className="breadcrumbs">
        <a href="index.html">Home</a>
        {
          path.map((v) => {
            return <span><span className="divider">›</span>{v}</span>
          })
        }
      </nav>
    );
  }
});

export default Breadcrumbs;

這邊使用到 Destructuring

var { path } = this.props;

相當於:

var path = this.props.path;

遇到像這樣的狀況,可以少打很多字,又讓 code 好讀:

var { str, con, dex, int, wiz, cha } = this.props;

接著靠 Array.prototype.map 列舉 path 的內容,用 Arrows () => {} 取代長長的 function () {} ,加上 Fat Arrows 會自動綁定 function 裡面的 this ,用在 click 之類的事件上很方便,例如:

render() {
  return <div onClick={() => this.setState({ foo: 'bar' })}>foobar</div>;
}

而不用再寫:

render() {
  var self = this;
  return <div onClick={() => self.setState({ foo: 'bar' })}>foobar</div>;
}

最後 import 該 component 的 scss ,就完成了:

import React from 'react';
import './Breadcrumbs.scss';

別的 Component 怎麼使用這個 Component ?

上層只要 import 即可:

import Breadcrumbs from './Breadcrumbs';

/* 略 */

  render() {
    return (
      <div>
        <Breadcrumbs path={['More', 'React', 'About']} />
      </div>
    );
  }

/* 略 */

參考資料

6to5 改叫 Babel 了,它的教學教了我很多,中文的 ECMAScript 6 入门 也很棒,但是沒有個別功能的連結。 @lyforever 還推薦了 Understanding ECMAScript 6

EDIT

再次感謝 @lyforever review jsx 。

由 Isaac Huang 發佈於