Question

我试过这个但没有成功。

var osDD = React.createClass({
    propTypes: {
        dat: React.PropTypes.array
    },
    render: function(){
        var li = this.props.dat;
        console.log(li);
        return (
            <ul><li></li></ul>
        )
    }
});

var osPre = React.createClass({
    render: function(){
        var osdd = React.createElement(
            osDD,
            {dat: this.props.dat}
        );

        return (
            <div>
                <header>{this.props.title}</header>
                <p>{this.props.description}</p>
                <span className="opt_serv_price">{this.props.price}</span>
                <osdd/>
            </div>
        )
    }
});

这只是在DOM中呈现空标记<osdd/>。

也许我不是以React方式做的。我刚看完一些视频并做了一些阅读后才开始玩React。

Answer 1

好的，我遇到了这个网站（http://ricostacruz.com/cheatsheets/react.html#nesting），它谈到了在React中嵌套。

因此尝试遵循并更新我的代码：

var osDD = React.createClass(/*no changes*/);
var osPre = React.createClass({
render: function(){
    return (
        <div>
            <header>{this.props.title}</header>
            <p>{this.props.description}</p>
            <span className="opt_serv_price">{this.props.price}</span>
            <osDD/>
        </div>
    )
}
});

但它仍然没有奏效。在官方文档（http://facebook.github.io/react/docs/multiple-components.html）中查看更多示例时，我注意到所有这些示例都使用变量大写来定义它们的ReactClass。

所以我必须将我的班级名称从osDD更改为OsDD并且它有效！我想我错过了关于这个的文档中的某个地方。如果有人能指出我所说的话，我将不胜感激。

Answer 2

找到答案非常出色，JSX将在幕后为您运行createElement。既然你可以在技术上提出html中的任何随机DOM元素，你告诉JSX你要通过大写第一个字母来渲染React类而不是平面旧DOM元素。

以下是文档：React Class Capitalization

HTML标记与反应组件   React可以呈现HTML标记（字符串）或React组件（类）。

要呈现HTML标记，只需在JSX中使用小写标记名称

要渲染React Component，只需创建一个以大写字母
开头的局部变量

我可以在ReactClass中有一个ReactClass吗？

2 个答案: