web-dev-qa-db-ja.com

reactjsおよびbabelを使用して関数をエクスポートする

私は、reactjsを使用するプロジェクトを持っています。これはbabelによって転送されます。私はes2015を使用し、.babelrcの変換に反応します。現在リファクタリングを行っており、最初のパスでは基本的にexport class fooで必要なすべてのことを行いました。これらのクラスの多くは実際には単なる関数でなければならないので、そのように書き直そうとしていますが、同じエラーが発生し続けます。私のメインアプリケーションファイルは次のようになります。

import React, { Component } from 'react';

import {Foo, Bar} from './components/ui.js';

class Application extends Component {

  constructor(props){
    super(props);
    this.state = {
      object: null
    }
  }

  componentDidMount(){
    // code
  }

  componentDidUpdate(){
    // other code
  }

  render(){
    return(
      <div>
        <Foo />
        <Bar />
      </div>
    )
  }

}

module.exports = Application

そして、ui.jsからのインポートは次のようになります。

import React, { Component } from 'react';

export class Foo extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      // Some JSX
    )      
  }
}


export class Bar extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      // Some other JSX
    )      
  }
}

これらのエクスポートされたクラスの1つを関数に変更しようとすると、たとえば：

// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar {
  render() {
    return (
      // Some other JSX
    )      
  }
}

次のエラーが表示されます。

SyntaxError: Unexpected token <line where I declare a function>

私が何を間違っているのかはわかりませんが、グーグル検索では他の問題に対する答えしか出ていません。

javascriptreactjsecmascript-6babel
6
eignhpants

関数を変数として定義するのと同じですが、フロントにエクスポートを追加するだけです。 （ES6構文を使用）

export const render = () => (
  // Some other JSX
);

または代わりに

export var render = function() {
  return (
    // Some other JSX
  );
};
6
Chris Herring

関数のエクスポートはクラスのエクスポートと同じです。基本的なルールに従う必要があります。

  1. 関数/クラス名はCAPSにある必要があります
  2. 「エクスポート」行は1つだけです。
  3. すべての関数の戻り本体には、他の部分を含む単一のタグが必要です。最も一般的に使用されるのはタグです。
  4. 通常、これは機能します。「./ App」からアプリをインポートします。 App.jsはjsxファイルです。明示的なインポートもできます。 ：「./classhouse.jsx」からAllAppをインポートします。
  5. Js/jsxファイルの名前は関係ありません。大文字でも小文字でもかまいません。
  6. 1つのファイルから複数の関数を返すには、他のすべての関数を含むもう1つの関数を作成する必要があります。

返された複数の関数を示す以下の例を参照してください。

import React from 'react';

/* All function / class names HAS TO BE in CAPS */

var App1 = function (){
    return (
        <div>
            <h1>
                Hello World
            </h1>
        </div>
        )
}

var App2 = function (){
    return (
        <div>
        <h1>World Number 2 </h1>
        </div>
           );
}

var AllApp = function (){
    return (
        <div>
            <App1 />
            <App2 />
        </div>
        );
}

export default AllApp;

index.jsファイル：

import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";

const jsx =
<div>
    <AllApp />
    <App />
</div>

ReactDOM.render(jsx, document.getElementById("root"));
4
Arindam Roychowdhury

あなたは書いてます functional components間違った方法で。

function Welcome() {
  return <h1>Hello World</h1>;
}

または

const Welcome = () => {
    return <p>Hello Wrold</p>
}
export default Welcome ;

ES6は、デフォルトのconstのエクスポートを許可しません。最初に定数を宣言してからエクスポートする必要があります。

1
vijayscode