Javascript 在真正的DOM可用之前调用componentDidMount

我是个新来的人。我需要得到一个元素的高度，所以我试图在

componentDidMount

方法中得到它。我知道这个方法是在呈现组件之后调用的，组件最终将编写我假设的真实DOM。但是，

componentDidMount

在最终DOM可用之前被调用。为什么

componentDidMount() {
  const el = window.document.getElementById('comments'); // el is null
  console.log(el);  
}

resize() {
  const el = window.document.getElementById('comments'); // el is null
  console.log(el);
}

render() {
  const { name } = this.props;
  const Comments = this.props.comments.filter(comment => comment.body !== null && comment.body !== '').map(comment => <Comment key={comment.id} comment={comment} />);
  return (
    <div ref={this.resize}>
      <div>
        <div id="comments">
          { Comments }
        </div>
      </div>
    </div>
  );
}

componentDidMount（）{
const el=window.document.getElementById（'comments'）；//el为null
控制台日志（el）；
}
调整大小（）{
const el=window.document.getElementById（'comments'）；//el为null
控制台日志（el）；
}
render（）{
const{name}=this.props；
const Comments=this.props.Comments.filter（comment=>comment.body！==null&&comment.body！==''）.map（comment=>）；
返回(
{评论}
);
}

在React上，您不应该依赖于render方法返回的DOM。组件和渲染部分在React中是两个不同的过程，因此从外到内的方法在React中不起作用。您可以做的是，将注释另存为引用：

 componentDidMount() {
      var erd = elementResizeDetectorMaker();
      erd.listenTo(this.refs.comments, resize);
    }

    resize(element) {
       //do-some-thing
    }

    render() {
      const { name } = this.props;
      const Comments = this.props.comments.filter(comment => comment.body !== null && comment.body !== '').map(comment => <Comment key={comment.id} comment={comment} />);
      return (
        <div>
          <div>
            <div ref={comments => { this.comments = comments; }}>
              { Comments }
            </div>
          </div>
        </div>
      );

}

componentDidMount（）{
var erd=elementResizeDetectorMaker（）；
erd.listenTo（this.refs.comments，resize）；
}
调整大小（元素）{
//做点什么
}
render（）{
const{name}=this.props；
const Comments=this.props.Comments.filter（comment=>comment.body！==null&&comment.body！==''）.map（comment=>）；
返回(
{this.comments=comments；}}>
{评论}
);
}

---

PS：在类似的情况下，我使用了这个惊人的库：

您的选择器

constel=window.document.getElementById（'comments'）（这是反模式）
为null，因为您的选择节点不存在于
componentDidiMount
render生命周期中

您需要选择节点的内部反应模式（或阴影DOM）

更改此代码块的代码，替换javascript选择器“getElementBy”作为React的引用。检查文件

componentDidMount（）{
设el=this.refs['comments']
控制台日志（el.clientHeight）
这是resize（）
}
调整大小（）{
设el=this.refs['comments']
控制台日志（el.clientHeight）
}
render（）{
const{name}=this.props；
const Comments=this.props.Comments.filter（comment=>comment.body！==null&&comment.body！==''）.map（comment=>）；
返回(
{评论}
);
}
Add code example.@ruicsta done和thanksThanks，但我仍然不知道元素的实际高度，这种情况被认为是遗留问题，应该在新代码中避免。使用像
ref={comments=>{this.comments=comments；}}
这样的函数。
componentDidMount() {
  let el = this.refs['comments']
  console.log(el.clientHeight)
  this.resize()
}

resize() {
  let el = this.refs['comments']
  console.log(el.clientHeight)
}

render() {
  const { name } = this.props;
  const Comments = this.props.comments.filter(comment => comment.body !== null && comment.body !== '').map(comment => <Comment key={comment.id} comment={comment} />);
  return (
    <div ref='comments'>
      <div>
        <div id="comments">
          { Comments }
        </div>
      </div>
    </div>
  );
}