コンポーネントを動的にインポート/要求しようとしていますが、何とかしたら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} />
);
}
}
/*/********************************************************************///
この解決策は、http://stackoverflow.com/a/36678030/1155847で見つかった可能性があります。私はこれを試してみて、これがうまくいくかどうかを質問してください。 –