用数字反应动态渲染

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

有更简单的方法吗？或者是动态渲染吗？

感谢