首页 文章

ReactJS组件呈现以及如何将元素附加到组件所安装的div上

提问于
浏览
3

我'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 回答

  • 0

    好的,您的问题并不清楚,但HTML中生成的数据所表示的数据与您通过AJAX获得的数据完全不同 .

    有一个简单的解决方案 . 您将要做的就是获取已经存在的数据,将其存储到数组中,并将通过AJAX获取的新数据附加到其中,而不是创建与原始DOM布局相邻的全新DOM元素 . 阵列 . 这样,您将获得React的DOM差异化的好处 . 为什么有用?也许你想让用户对数据进行排序,或者直接与数据交互,同时它仍然完全控制父React组件 .

    所以无论如何,看看这个小提琴:https://jsfiddle.net/x4jjry04/3/ . 它是小提琴 .

    var Page = React.createClass({ 
      getDefaultProps: function () {
        return {
          items: []
        }
      },
      getInitialState : function(){
        return{
          items : this.props.items
        }
      },
      componentDidMount: function () {
        // Mimics an AJAX call, but replace this with an actial AJAX call.
        setTimeout(function () {
          var dataFromAjax = ['one', 'two', 'three'];
          this.setState({
            items: this.state.items.concat(dataFromAjax)
          });
        }.bind(this));
      },
      addClick : function(){
        this.state.items.push("more");
        this.forceUpdate();
      },
      render : function(){
        return <div>{this.state.items.map(function(item){return <div className="bla-bla-class">{item}</div>})}
    <div onClick={this.addClick}>ADD</div></div>; } }); var elements = document.querySelectorAll('.item-list__child-item'); var initialvalues = Array.prototype.slice .call(elements) .map(function (div) { return div.innerHTML; }); React.render(<Page items={initialvalues} />, document.body);
  • 1

    检查这个简单的小提琴演示:

    https://jsfiddle.net/x4jjry04

    var Page = React.createClass({ 
       getInitialState : function(){
       return{
        items : ["one","two","three"]
       }
      },
      addClick : function(){
       this.state.items.push("more");
       this.forceUpdate();
    
      },
      render : function(){
       return <div>{this.state.items.map(function(item){return <div className="bla-bla-class">{item}</div>})}
    <div onClick={this.addClick}>ADD</div></div>; } }); React.render(<Page />, document.body);
  • 4

    我假设您正在使用react服务器端来呈现列表?

    在页面加载时,您从服务器获取原始列表,并让组件“重新呈现”元素 . 重新渲染是引号,因为除非列表更改,否则React实际上不会更新列表 . 现在,您可以使用按预期工作的组件进行设置,并且可以根据需要向列表中添加元素 .

    具有同构/通用React的一般理念是将您的应用视为普通的单页应用,并让React处理脏检查的魔力 .

    这也意味着您可以在服务器上呈现时使用相同的组件,因为您的组件不包含任何客户端特定的代码 .

相关问题