Help us understand the problem. What is going on with this article?

React.jsでES6の文法を使って defaultProps などを設定する

More than 5 years have passed since last update.

環境

Tools Version
react-tools 0.13.1
jsx 0.12.2
react.js 0.13.1
JSXTransformer.js 0.13.1

react-toolsnpmでインストールし、jsx--harmonyオプションを付けてコンパイルした。

npm install -g react-tools
jsx --harmony -w src build

方法

var Hello = React.createClass({
  getDefaultProps: function() {
    return {name: "Default Props"};
  },

  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

class Hello extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    console.log(this.props);
    this.state = {name: this.props.initialName};
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}
Hello.defaultProps = {initialName: "Default Props"};

にする。

詳細

普通にdefaultPropsを記述すると、

var Hello = React.createClass({
  getDefaultProps: function() {
    return {name: "Default Props"};
  },

  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

となる。
これを、ES6で記述すると、

class Hello extends React.Component {
  getDefaultProps() {
    return  {name: "Default Props"};
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

となるとおもいきや、defaultPropsが全然効かない。

Reusable Componentsのドキュメントを読むと、propTypesdefaultPropspropTypesはどうやら書き方がちょっと違うらしい。

The API is similar to React.createClass with the exception of getInitialState. Instead of providing a separate getInitialState method, you set up your own state property in the constructor.

Another difference is that propTypes and defaultProps are defined as properties on the constructor instead of in the class body.

サンプルを見ながら書き換える。

export class Hello extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    console.log(this.props);
    this.state = {name: this.props.initialName};
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
Hello.defaultProps = {initialName: "Default Props"};

コンパイルは通るが、ブラウザで表示すると以下の様なエラーが出る。

Uncaught Error: Parse Error: Line 3: Illegal export declaration
    at file:///Users/yoshiki_aoki/work/react-tutorial/build/alone.js:3:undefined
export var ____Classm=React.Com ...
^

ちなみに、React.jsのページにあるJSX Compilerで、ドキュメントに載っているコードをコンパイルすると同じエラーが出る。

試しにexportをはずすと、エラーは発生しないがデフォルト値がセットされていない。
これは、別の箇所が原因でrenderpropsstateに変更するのを忘れていた事が原因だった。

class Hello extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    console.log(this.props);
    this.state = {name: this.props.initialName};
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}
Hello.defaultProps = {initialName: "Default Props"};

これで無事表示された。

References

dwango
Born in the net, Connected by the net.
https://dwango.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした