Javascript React样式化组件-如何访问原始html

在我的应用程序中，我有一个正在转换为a的组件的参考。ref用于访问组件的原始html元素上的offsetHeight和scrollHeight属性。一旦我将这个组件切换到样式化组件，ref现在指向样式化组件而不是原始html元素，我不确定如何引用基本元素。这能做到吗

例如：

const TextArea = styled.textarea`
  display: block;
  margin: 0 0 0 18%;
  padding: 4px 6px;
  width: 64%;
  font-size: 1rem;
  color: #111;`;

export default class Input extends Component {
  componentDidMount() {
    const height = this.textInput.scrollHeight;
    // do something....
  }
  render() {
    return (
      <div>
        <TextArea
          ref={(input) => this.textInput = input}
        ></TextArea>
      </div>
    );
  }
}

const TextArea=styled.TextArea`
显示：块；
利润率：0.18%；
填充：4px6px；
宽度：64%；
字号：1rem；
颜色：#111；`；
导出默认类输入扩展组件{
componentDidMount（）{
常量高度=this.textInput.scrollHeight；
//做点什么。。。。
}
render（）{
返回(
this.textInput=input}
>
);
}
}

是的，可以做到。您可以使用访问原始html。但是，请记住，不鼓励使用此方法。您可以在参考页面中了解更多信息。

将

ref

传递给样式化组件将为您提供对

样式化组件

包装器的引用，而不是DOM节点。要获取对实际DOM节点的引用，请传递innerRef属性。（见附件）

这是您需要做的：

const TextArea = styled.textarea``;

export default class Input extends Component {
  componentDidMount() {
    const height = this.textInput.scrollHeight;
    // do something....
  }
  render() {
    return (
      <div>
        <TextArea
          innerRef={(input) => this.textInput = input}
        ></TextArea>
      </div>
    );
  }
}

const TextArea=styled.TextArea`；
导出默认类输入扩展组件{
componentDidMount（）{
常量高度=this.textInput.scrollHeight；
//做点什么。。。。
}
render（）{
返回(
this.textInput=input}
>
);
}
}

谢谢。我的印象是这个api被弃用了。不是这样吗？我不确定，但文件中没有提到。你有推荐人吗？我看看能不能找到，然后再给你回复。我确实记得有人说过，正如你提到的，它是不受鼓励的。它没有贬值。它已从“react”模块中删除，现在可在“react dom”模块中使用，这就是我要找的。谢谢请注意，从4.0开始，您可以使用

ref

而不是

innerRef