一旦组件在 react 中渲染，我们可以修改 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 以及高级概述。

蓝色和ping是一个绝对div，其高度相应增长，如果第一级数据较少，第二级有嵌套和更多列表项，高度没有调整，所以交换div和它的工作。

这里的问题是：用 jquery 处理这个问题是否正确？ React DOM 现在没有更新？如何更新react dom，假设调用render方法，写的jquery代码会不会过时？

是否有可能使用 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的提示