React.jsでファイル間で変数の受け渡しをする場合についてです

Question

以下の様なタグがあったとします。

<h3 className={style.text1}>アイウエオ</h3>

以上のアイウエオの文字の部分を変数にして例えば、

<h3 className={style.text1}>var1</h3>

の様にしたいです。また、以上のvar１をたのファイルでvar var1 = アイウエオの様に宣言しておいてそのファイルからvar1を読み込める様にしたいのですが、どうすれば良いでしょうか？

Comments

[maisumakun]

var1の定義を書き込んだ別ファイルは、どのような方法で参照することを考えていますでしょうか。「一緒にビルドする」、「HTMLから参照する」などいくつか方法が考えられます。

[Hayato1201]

同じディレクトリにあるファイルなので一緒にビルドするになると思います。

Answer 1

一緒にビルドするなら、以下のような感じになります。

/* var1.js */
export default var var1 = 'hoge';


/* SomeComponent.js */
import var1 from './var1.js'

function SomeComponent(props){
  return <h3 className={style.text1}>{var1}</h3>;
}

Comments

[Hayato1201]

すみません、これだと宣言のvarのところでUnexpected tokenだってエラーが出ます。。。

[maisumakun]

すみません、間違えました。「var var1 = 'hoge'; export default var1;」のように2行に分けてください。

[Hayato1201]

ありがとうございます！できました！このあと、var1だけじゃなくいくつものtextをtext1,text2の様に一つのファイルにまとめて書いてexportしたいのですが、どうすればいいでしょうか？１つのファイルでいくつかexportを書くとOnly one default export allowed per module.の様に言われます。

[Hayato1201]

すみませんやっぱり解決しました！