我'm having this use case where there is a '在页面上加载更多'按钮以从API endpoints 获取更多项目,因此我希望这些项目在到达时附加到DOM . 问题是,Web服务器提供的HTML页面带有一些额外的列表项(如下所示),在我装载我的React组件的同一 item-list
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类名称'item-list'的独立兄弟div并添加一个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概念及其工作原理 . 无论如何,我们将非常感谢您对此有任何指示 .
3 回答
好的,您的问题并不清楚,但HTML中生成的数据所表示的数据与您通过AJAX获得的数据完全不同 .
有一个简单的解决方案 . 您将要做的就是获取已经存在的数据,将其存储到数组中,并将通过AJAX获取的新数据附加到其中,而不是创建与原始DOM布局相邻的全新DOM元素 . 阵列 . 这样,您将获得React的DOM差异化的好处 . 为什么有用?也许你想让用户对数据进行排序,或者直接与数据交互,同时它仍然完全控制父React组件 .
所以无论如何,看看这个小提琴:https://jsfiddle.net/x4jjry04/3/ . 它是小提琴 .
检查这个简单的小提琴演示:
https://jsfiddle.net/x4jjry04
我假设您正在使用react服务器端来呈现列表?
在页面加载时,您从服务器获取原始列表,并让组件“重新呈现”元素 . 重新渲染是引号,因为除非列表更改,否则React实际上不会更新列表 . 现在,您可以使用按预期工作的组件进行设置,并且可以根据需要向列表中添加元素 .
具有同构/通用React的一般理念是将您的应用视为普通的单页应用,并让React处理脏检查的魔力 .
这也意味着您可以在服务器上呈现时使用相同的组件,因为您的组件不包含任何客户端特定的代码 .