javascript - 一旦组件在 react 中呈现，我们可以修改 div 吗？

Question

我正在尝试找到一种解决方案来修改 div 的高度以根据自动增长的元素数量来使用react。

所以，为了做同样的事情，我选择了 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 现在不更新了？怎么更新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的小贴士