无法读取未定义的属性“ scrollHeight”（错误）

Question

我创建了一个ReactJS项目，并试图将该项目转换为React-Redux，但是在转换时，我收到一条错误消息：

无法读取未定义的属性'scrollHeight'

我还将createRef方法更改为forwardRef，但这仍然无法正常工作

这是我的代码：

import React from "react";
import { connect } from "react-redux";
import { Accordion } from "./component/accordion";
import { setActive } from "./component/actions/activeActions";
import { setHeight } from "./component/actions/heightActions";

class App extends React.Component {
  content = React.forwardRef();
  render() {
    return (
      <div className="container">
        <Accordion
          active={this.props.active.toggle}
          height={this.props.height.expand}
          lift={this.content}
          toggleAccordion={this.props.setActive(
            this.props.active === "" ? "active" : "non-active"
          )}
          {...this.props.setHeight(
            this.props.height === "active"
              ? "0px"
              : `${this.content.current.scrollHeight}px` <---
          )}
          title={
            <div>
              <p>Hello</p>
            </div>
          }
          content={
            <div>
              <p>World</p>
              <p>World</p>
              <p>World</p>
              <p>World</p>
            </div>
          }
        />
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    active: state.active,
    height: state.height
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    setActive: (active) => dispatch(setActive(active)),
    setHeight: (height) => dispatch(setHeight(height))
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

这是代码沙箱：

https://codesandbox.io/s/gracious-glade-u90xy?file=/src/App.js