レベルでレンダリング私は、動的にしたい番号

Question

私page.js

class R1 extends React.Component { 

    render() { 
     return (
      <div className="r1"> 
       <h1>level1</h1> 
      </div> 
     ); 
    } 
} 
class R2 extends React.Component { 
    render() { 
     return (
      <div className="r2"> 
       <h1>level2</h1> 
      </div> 
     ); 
    } 
} 

私main.js

important * as Page from './page'; 
class App extends React.Component { 
    render() { 
     return (
      <div className="r1"> 
       <Page.R+level/> 
      </div> 
     ); 
    } 
} 

スキップgetInitialState、 とダイナミックなレンダリング反応します。 私はそれが失敗したと働いていないReact.renderComponent(<Page.R+this.state.level />, document.body);

を試してみてくださいにSyntaxError

は、より簡単な方法はありますか？動的レンダリングが利用可能ですか？

おかげ

Answer 1

main.jsはあなたが

import * as Page from './page'; 
class App extends React.Component { 
    render() { 
    const level = 2; 
    return (
     <div className="r1"> 

     {/*You use loop over list to get value of level and render all the pages*/} 

     {React.createElement(Page[`R${level}`], null)} 

     </div> 
    ); 
    } 
} 

Page望むものを達成するために、次のように変更することができますがオブジェクトであり、私たちはページにアクセスし、文字列型であるコンポーネント名をレンダリングしようとしています。

Answer 2

ない、一般的に、別のファイルにそれらを置くために慣例で、ここで前提があるので、あなたのコンポーネントをエクスポートする方法を確認してください。このようなJSX内部の声明場合は、使用して親コンポーネントでレンダリングすることができ

：

class App extends React.Component { 
    render() { 
    var renderPage; 
    if (something) { 
     renderPage = <PageOne />; 
    } else { 
     renderPage = <PageTwo />; 
    } 
    return (
     <div> 
     {renderPage} 
     </div> 
    ); 
    } 
}