组件渲染后，是否可以修改div？

Question

我正试图找到一种解决方案，以根据将自动增长的元素数量来修改div的高度。

所以，要做同样的事情，我选择了jQuery

     ul.each(function() {
        const self = $(this);
        const { listCount, ulCount } = getListItemsCount(self);
        const ruleHeight = listCount * listDefaultHeight;
        const children = $(self).children();

        /* Swapping of elements to adjust the heights */
        if (children.length - 1 === 2 && ulCount === 1) {
          if ($(children[2]).data('count') > $(children[1]).data('count')) {
            $($(self).children()[2]).insertBefore($($(self).children()[1]));
            //ruleHeight += 25;
          }
        }

        $(self)
          .find('div')
          .css({ height: `${ruleHeight}px` });
      });

上面的代码在componentDidMount()内部发生。我在这里这样做的原因是，由于div位置是绝对的，我们不确定需要增加多少高度，并且取决于第一级内容，我们正在交换div和高级概述。

blue和ping是一个绝对div，其高度会相应增加，如果第一级数据较少并且第二级嵌套且有更多列表项，则高度没有调整，因此请交换div及其工作。

这里的问题是：用jquery处理这个问题是否正确？ React DOM现在不更新？

如果假设调用了render方法，那么如何更新react dom也将被废弃？

是否有可能使用flex自动调整高度而无需使用jquery来确定绝对位置或仅通过CSS来调整高度？

请指导最佳做法执行相同操作

Answer 1

我建议不要使用jquery，而是在componentDidMount中编写一个函数来计算div的高度，并在render方法中设置div的高度。

这是一个例子

componentWillMount() {

       this.setDivHeight();
  }


return () {

       render(
          <div style={{height: this.state.divHeight}}>

          </div>
        )
  }

这仅供参考，您必须调用一个函数来设置状态divHeight的更改值以重新渲染组件，并且div高度也会在每次渲染时更改。也将建议JSX中的用户对您的组件进行编码。关于JSX

的提示