递归加载其他组件的React组件

Question

所以，我有一个用wordpress构建的媒体网站，它使用的是react js（我不建议这样做，因为wordpress有自己的做事方式，但react并不总是很好）。在这个网站上，我想有一个侧边栏，根据旁边文章的高度动态加载侧边栏的元素（广告、推荐文章、社交媒体按钮等）。这些元素本身就是反应组分。因此，在我的脑海中，这一切的工作方式是，文章组件首先加载到页面上，完成后，componentDidMount，它获取自己的高度并将其发送到侧边栏组件。这部分是如何发生的对我的问题来说并不重要，但它作为道具this.props.data.sidebarHeight）提供给侧边栏组件。侧边栏然后根据这个高度创建自己。它递归地这样做，或者应该这样做：如果我还有这么多空间，那么我会加入一个广告组件，然后从我的高度中减去广告组件的高度，然后一直检查新的高度，直到我没有足够的空间添加更多的组件为止（请参阅.Bam动态侧边栏。下面是我的侧边栏组件的jsx代码：

var SidebarComponent = React.createClass({
    recursivelyMakeSidebar: function(height, sidebar) {
        // base case
         if (height < 250 ) {
            return sidebar;
        }
        if (height > 600) {
            sidebar = sidebar + <AdvertisementSkyscraper />;
            newHeight = height - 600;
        } else if (height > 250) {
            sidebar = sidebar + <AdvertisementBox />;
            newHeight = height - 250;
        }
        return this.recursivelyMakeSidebar(newHeight, sidebar);
    },
    render: function() {
        sidebarHeight = Math.round(this.props.data.sidebarHeight);
        currentSidebar='';
        sidebar = this.recursivelyMakeSidebar(sidebarHeight, currentSidebar);
            return (
                <div>
                    {sidebar}
                </div>
            )
        }
    }
);
// render component
React.render(
    <SidebarComponent data={dataStore.sidebar} />,
    document.getElementById('mn_sidebar_container')
);

它不起作用。它将[object object]返回到DOM中。也许我的反应还不够理解，但如果真的有可能的话，任何关于如何做到这一点的想法都会很棒。

Answer 1

这里的根本问题是，您将组件连接在一起，就好像它们是HTML字符串一样，但它们实际上是函数。将它们作为函数推入数组中会起作用。在下面的例子中，我还将一些比较运算符调整为">="，以确保您不会陷入无休止的循环中。

var SidebarComponent = React.createClass({
  recursivelyMakeSidebar: function(height, sidebar) {
    if (height < 250 ) {
        return sidebar;
    }
    if (height >= 600) {
        sidebar.push(<p>600</p>)
        height-=600
    } else if (height >= 250) {
        sidebar.push(<p>250</p>)
        height-=250
    }
    return this.recursivelyMakeSidebar(height, sidebar);
  },
  render:function(){
    var sidebarHeight = Math.round(this.props.data.height);
    var currentSidebar = [];
    var sidebar = this.recursivelyMakeSidebar(sidebarHeight,  currentSidebar)
    return <div>{sidebar}</div>
}
});

var sidebar = {height:900}
// render component
React.render(<SidebarComponent data={sidebar} />, document.body);