为Reactstrap Jumbotron添加ref引发错误，如何解决？

这个问题我之前也碰到过，其实原因很明确：Reactstrap的Jumbotron组件是无状态函数组件（Stateless Function Component，SFC），在React的旧版本中，无状态函数组件并不支持直接接收ref属性，所以你直接给它加ref会触发这个警告，而且实际也无法获取到对应的DOM元素。

下面给你几个亲测可行的解决方案：

方案1：用Reactstrap自带的innerRef属性（最推荐） #

很多UI组件库都考虑到了无状态组件的ref问题，Reactstrap也不例外——它给Jumbotron这类无状态组件提供了innerRef属性，专门用来传递ref到内部的真实DOM元素上。你只需要把代码改成这样：

<Jumbotron className="test" innerRef={(divElement) => this.divElement = divElement}>
  {/* 这里放Jumbotron的内容 */}
</Jumbotron>

改完之后，你就能通过this.divElement拿到Jumbotron对应的DOM节点，直接读取它的高度就没问题了。

方案2：用React的forwardRef包装组件（适合想坚持原生ref语法的场景） #

如果你习惯用原生的ref写法，可以用React的forwardRef把Jumbotron包一层，把ref转发到内部的DOM元素上：

import React, { forwardRef } from 'react';
import { Jumbotron } from 'reactstrap';

// 包装一个支持ref的Jumbotron组件
const RefJumbotron = forwardRef((props, ref) => {
  return <Jumbotron {...props} innerRef={ref} />;
});

// 之后在你的组件里用这个包装好的版本
<RefJumbotron className="test" ref={(divElement) => this.divElement = divElement}>
  {/* Jumbotron内容 */}
</RefJumbotron>

这个方法本质上还是借助了innerRef，只是让你能用原生ref的方式来调用，适配你的编码习惯。

方案3：函数组件场景用useRef配合innerRef #

如果你是在函数组件里使用Jumbotron，可以用React的useRef钩子来实现：

import React, { useRef, useEffect } from 'react';
import { Jumbotron } from 'reactstrap';

function YourComponent() {
  const jumbotronRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成后获取高度
    if (jumbotronRef.current) {
      const height = jumbotronRef.current.offsetHeight;
      console.log('Jumbotron的高度是：', height);
    }
  }, []);

  return (
    <Jumbotron className="test" innerRef={jumbotronRef}>
      {/* Jumbotron内容 */}
    </Jumbotron>
  );
}

小补充 #

拿到DOM元素后，你可以根据需求选择offsetHeight（包含边框、内边距的高度）、clientHeight（只包含内边距的高度）或者scrollHeight（包含滚动内容的总高度）来获取对应的数值哦。

内容的提问来源于stack exchange，提问作者Poogy