Question

所以，我有一个使用wordpress构建的媒体网站正在使用react js（我不建议这样做，因为wordpress有自己的做事方式，并不总是很好地做出反应）。在这个网站上，我希望有一个侧边栏，根据旁边文章的高度动态加载侧边栏的元素（广告，推荐文章，社交媒体按钮等）。这些元素本身就是反应成分。所以它的工作方式，在我的脑海中，首先是文章组件被加载到页面上，当完成时，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字符串一样，但它们实际上是函数。将它们推入数组，因为函数将起作用。我还将一些比较运算符调整为＆＃39;＆gt; =＆＃39;在下面的示例中，确保您不会陷入无限循环。

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

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

1 个答案: