我正在使用这个用例,页面上有一个"加载更多"按钮,用于从API端点获取更多项目,因此我希望这些项目在到达时附加到DOM.问题是,Web服务器提供的HTML页面附带了一些额外的列表项(如下所示),在item-list我装载我的React组件的同一div容器中,在页面加载时使用空数据/道具.
<div class="item-list">
<div class="item-list__child-item"></div>
<div class="item-list__child-item"></div>
...
<div class="item-list__child-item"></div>
</div>
我的假设是,如果我以ReactJS方式处理这个问题,只要我从服务器(REST)获取更多项目并将这些项目附加到'itemList'状态数组,react就会以某种方式替换所有包含该内容的内容. item-list'dc安装组件的位置.
我正在考虑的一个快速的解决方法是工作,并且它不依赖于同构的东西并预先渲染服务器上的react组件,就是创建一个单独的兄弟div,它具有相同的div类名'item-list'并添加一个id属性来安装组件,因此生成的HTML将如下所示:
<div class="item-list">
<div class="item-list__child-item"></div>
<div class="item-list__child-item"></div>
...
<div class="item-list__child-item"></div>
</div>
<div class="item-list" id="react-component-name"></div>
也许有一种更简洁的方法可以做到这一点而不会进入同构的东西,或者我可能不理解React概念及其工作原理.无论如何,我们将非常感谢您对此有任何指示.
reactjs ×1