React NativeのClass内で定数を宣言できない理由

Question

React NativeのClass内で定数を宣言すると、

'use strict';
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import random from 'random';

export default class Random extends Component {
  const random = random.generate();
  render() {
    return (
      <View>
        <Text>{random}</Text>
      </View>
    );
  }
}

Parsing error: Unexpected tokenというエラーが出るのですが、

Class外で宣言するとうまくいきます。

'use strict';
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import random from 'random';

const random = random.generate();

export default class Random extends Component {
  render() {
    return (
      <View>
        <Text>{random}</Text>
      </View>
    );
  }
}

これはなぜでしょうか？

Answer 1

これはなぜでしょうか？

いまのところ、クラスで定数を宣言する文法がないからです。

なお、クラスオブジェクトへの代入は、constではなくstaticを使えば可能です（Babelでの変換がほぼ必須ですが）。

export default class Random extends Component {
  static random = random.generate();
  render() {
    return (
      <View>
        <Text>{Random.random}</Text>
      </View>
    );
  }
}

Comments

[rina_teratail]

ただ、定数を宣言して、propsやstylesのオブジェクトを入れることは可能ですよね？

[maisumakun]

> ただ、定数を宣言して、propsやstylesのオブジェクトを入れることは可能ですよね？

どういうことでしょうか。

[rina_teratail]

失礼しました。functional componentとの勘違いでした。
class componentでは定数の宣言はできず、functional componentでは定数を宣言してその中にstylesオブジェクトやpropsオブジェクトを入れれるということですよね？？

[maisumakun]

クラスコンポーネントでもrender()内で「const {props} = this;」のようなことはできます。

[rina_teratail]

つまりmethodの中でなければ定数を宣言できないよいうことでしょうか？

[maisumakun]

そもそも、クラスにする以前のオブジェクト自体に「定数」という機能がないですし。