2016-12-05 3 views
1

コンポーネントを動的にインポート/要求しようとしていますが、何とかしたらReact complains。 require関数はそれを見つけ出しますが、Reactはいくつかの関数 't'が欠けているというエラーをスローします。これは電子アプリケーションのすべてです。Reactコンポーネントを動的にインポートまたは要求する

私は、各ページに独自のレイアウトとjsxコンポーネントを持っているウィザード設定(それはうまくいくと思いますが、それほどエレガントではありません)を持っています。私が新しいページを追加したいのであれば、私はx個のファイルを管理したくないし、現時点では私が現在行っているセットアップのためにする必要がある。 達成するために達成しようとしていること、達成するために私が今やっていることを以下に見つけることができます。提案がある場合は、コードの匂いやより良いオプションを私に教えてください。私はReactとES2015の新機能です(私はC#のバックグラウンドだからです)。私が最初に「WizardPageContainer」コンポーネントの上に輸入/ファイルを宣言する必要が意味している:私は現在、それをやっている方法

export default class WizardPageContainer extends Component {  
    // Constructor 
    constructor(props) { 
     super(props);   
    } 

    // Render 
    render() { 
     const WizardPage = require(`./path/to/${this.props.step.id}`); 

     return (
      <WizardPage step={this.props.step} /> 
     ); 
    } 
} 

を達成しようとしている何

。余分な仕事をして、エラーや忘れがちなものです。 私はこのコードは[OK]を、今取り組んでいる、追加する必要がありますが、私は、これはエレガント/将来の証拠であるとは思わない:

/* PAGES */ 
import WizardPage_Welcome from './pages/0.wizard.welcome'; 
import WizardPage_SystemCheck from './pages/1.wizard.systemCheck'; 
import WizardPage_SignIn from './pages/2.wizard.signIn'; 
import WizardPage_ExamCode from './pages/3.wizard.examCode'; 
import WizardPage_TakeExamination from './pages/4.wizard.takeExamination'; 
import WizardPage_Close from './pages/5.wizard.close'; 
const pages = [  
    WizardPage_Welcome, 
    WizardPage_SystemCheck, 
    WizardPage_SignIn, 
    WizardPage_ExamCode, 
    WizardPage_TakeExamination, 
    WizardPage_Close 
]; 
/*/********************************************************************/// 

/* ******************************************************************** */ 
/* COMPONENT */ 
export default class WizardPageContainer extends Component {  
    // Constructor 
    constructor(props) { 
     super(props);   
    } 

    // Render 
    render() { 
     const WizardPage = pages[`${this.props.step.id}`]; 

     return (
      <WizardPage step={this.props.step} /> 
     ); 
    } 
} 
/*/********************************************************************/// 
+0

この解決策は、http://stackoverflow.com/a/36678030/1155847で見つかった可能性があります。私はこれを試してみて、これがうまくいくかどうかを質問してください。 –

答えて

1

私はそれが「デフォルト」についてだと思う:

あなたは、私がここにこの製作業バージョンを見ることができます。私はこのような問題があります。あなたはこのコードをチェックできますか? https://github.com/robeio/robe-react-admin/blob/master/src/app/HasAuthorization.jsx#L10

また、使用例も確認できます。 https://github.com/robeio/robe-react-admin/blob/master/src/app/HasAuthorization.jsx#L26

+0

"importComponent"を使うのは、あなたの提案を正しく理解していれば、代わりに "require"または "import"を使うべきですか? –

+1

あなたはこのように使います。 importComponent(require( "your path")) – Hasan

+0

このヒントをいただきありがとうございます。 –

1

あなたconst pagesニーズをオブジェクトではなく、配列します。 https://github.com/Frazer/meteor-react-nav/blob/master/lib/jsx/App.jsx

+0

私は今constyページのコードが私のために正しく動作していることを追加する必要があります。しかし、私はそれが十分にエレガントではないと思う、私はjson設定からメモリ内のステップをロードしているだけで、実行時にjsxページを検索したい。今、私は基本的にimport文とconstページオブジェクトだけでなく、私が持っているjsonファイル(デモコードには含まれていません)を使って、これらのことを2回行います。 –

+1

ですから、jsonファイルのデータを使用してインポートを行い、constページを作成する方法を見つけようとしていますか? –

+0

はい、私は.Net/Javaのバックグラウンドですが、UIの/ウィザードやメニューを構築する上でのこれらのことは、設定ファイルやその他のもので簡単です。 dbクエリなどで提供されています...おそらく、ここで行われていない、または悪い習慣と思われるものでしょうか?しかし、はい、基本的に私は、ファイルシステムでロード(または検索)した特定のパーツの名前を保持しているjsonでデータを受け取った後、constでrequireとstoreを使ってロードします。それはおそらく計画です - 実際には動的です。 –

-4

ベストアドバイス:Webpackを使用してインポートを処理すると、これまで以上に効率的です。

関連する問題