Javascript 将JS传递类作为变量

我想在ReactJS中创建如下内容，但我不知道如何创建，而且我最明确地说，我不想使用危险的HTML。这只是一个愚蠢的例子，但我希望它清楚地说明我想要什么。谢谢你帮助我

var page = {
    title: <ReactTitle title={this.props.page.name} />
    name: "Me myself and I"
};

var ReactTitle = React.createClass({
    render: function(){
        return (
            <h1>{this.props.title}
        );
    }
})
var NewPage = React.createClass({
    render: function(){
        return (
            <div className="row">
                {this.props.page.title}
                <div className="page-header"><h1>{this.props.page.name}</h1></div>
            </div>
        );
    }
})

React.render(
    <NewPage page={page} />
);

var页面={
标题：
姓名：“我自己和我”
};
var ReactTitle=React.createClass({
render:function（）{
返回(
{this.props.title}
);
}
})
var NewPage=React.createClass({
render:function（）{
返回(
{this.props.page.title}
{this.props.page.name}
);
}
})
反应(
);

您可以使用

React.createElement

，如下所示

var page = {
    title: React.createElement(ReactTitle, {title: "My awesome Title"}),
    name: "Me myself and I"
};

<div className="row">
  <ReactTitle title={this.props.page.title} /> 
  <div className="page-header"><h1>{this.props.page.name}</h1></div>
</div>

但在我看来，最好在

NewPage

中使用

ReactTitle

，就像这样

var page = {
    title: React.createElement(ReactTitle, {title: "My awesome Title"}),
    name: "Me myself and I"
};

<div className="row">
  <ReactTitle title={this.props.page.title} /> 
  <div className="page-header"><h1>{this.props.page.name}</h1></div>
</div>

{this.props.page.name}

---

我的解决方案，感谢@Alexander

//Example
var page1 = {
    title: [
        React.createElement("h1", "", "This is my page title");
        React.createElement("div", {className:"page-header"}, "This is the header of page 1");
    ],
    name: "Me myself and I"
};
//So page2, which is slidely different:
//Example
var page2 = {
    title: [
        React.createElement("h2", {className:"h2"}, "Title part",
            React.createElement("span", {className:"silent"}, "Silent part of page title")
        ),
        React.createElement("div", {className:"page-header"}, "This is the header of page 2");
    ],
    name: "Me myself and I"
};

---

在大多数情况下，您只需执行

，而不必执行

{this.props.page.title}

。但你只是想知道是否有可能按照你的描述去做，对吗？你为什么要这样做？假设您正在以模块化的方式工作（例如使用），那么您可以在

中只

require（）

您的

而不是传递它。因为我的大多数类可用于所有页面（在我的项目中）。但有些部分完全不同。我没有把它正常化，而是在考虑这个解决方案。