React Arborist组件height仅支持数值，如何设置百分比实现响应式？

下面是几个无需使用!important的可行方案：

方案1：用ResizeObserver动态计算高度 #

既然Tree组件仅接受数值型height，我们可以监听父容器的尺寸变化，实时将计算后的像素值传给height属性：

import { useState, useEffect, useRef } from 'react';
import { Tree } from 'react-arborist';

const ResponsiveTree = ({ children, ...props }) => {
  const [treeHeight, setTreeHeight] = useState(700); // 设置默认兜底高度
  const parentRef = useRef(null);

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      entries.forEach(entry => {
        // 直接获取父容器的可用高度，可根据需求调整（比如减去其他元素的固定高度）
        const calculatedHeight = entry.contentRect.height;
        setTreeHeight(Math.floor(calculatedHeight));
      });
    });

    parentRef.current && observer.observe(parentRef.current);

    return () => {
      parentRef.current && observer.unobserve(parentRef.current);
    };
  }, []);

  return (
    <div ref={parentRef} style={{ height: '100%', width: '100%' }}>
      <Tree {...props} height={treeHeight}>
        {children}
      </Tree>
    </div>
  );
};

这种方式能让Tree高度完全跟随父容器变化，既符合组件的属性要求，又能实现响应式布局。

方案2：利用组件内置的容器属性穿透样式 #

先查看React Arborist的文档，确认Tree组件是否提供了传递内部容器样式的prop（比如treeContainerProps这类）。如果有，可以直接给内部容器设置100%高度，同时将组件的height属性设为0让内部样式接管：

<Tree
  height={0} // 让内部容器样式主导高度
  treeContainerProps={{
    style: { height: '100%', minHeight: '300px' } // 添加最小高度避免容器塌陷
  }}
>
  {/* 节点内容 */}
</Tree>

方案3：用高优先级选择器覆盖默认样式 #

不使用!important也能提升样式优先级，只需写出比组件内部样式更具体的选择器。先打开开发者工具查看Tree渲染后的DOM结构和类名，比如组件根元素类名为react-arborist-tree，可以这样写：

/* 外层容器类名 + 组件根类名，提升选择器优先级 */
.tree-wrapper > .react-arborist-tree {
  height: 100%;
}

然后给Tree套上外层容器：

<div className="tree-wrapper" style={{ height: '100%' }}>
  <Tree {...props} />
</div>

内容的提问来源于stack exchange，提问作者Sebastián del Arca