反應動態與數量

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> 
    ); 
    } 
}