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

Question

所以，我有一个使用 WordPress 构建的媒体网站，它使用 React JS(我不会建议这样做，因为 WordPress 有自己的做事方式，但并不总是能很好地与 React 配合)。在此网站上，我希望有一个侧边栏，可以根据旁边文章的高度动态加载侧边栏的元素(广告、推荐文章、社交媒体按钮等)。这些元素本身就是 react 组件。因此，在我看来，这一切的工作方式是，文章组件首先加载到页面上，完成后，componentDidMount，它会获取自身的高度并将其发送到侧边栏组件。该部分如何发生对我的问题并不重要，但它作为 Prop 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 上。也许我对 react 的理解不够，但任何关于如何做到这一点的想法，如果它实际上可能的话，那就太好了。

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