反应:新安装的子组件无法访问父组件推荐程序？

Question

我在做什么：

简单-我需要滚动到消息列表的底部，一旦组件包含它(Messages)被挂载。

我的程序中的猴子扳手:)

安装后滚动到底部很好直到..。

我只是移动了一些家具，将可滚动子组件( header )的Messages(可滚动子组件)移动到它的父组件(MessageSection)中，以使header保持不变。

这里是前和后：

在(Yay！) MessageSection.js之前！

if(this.state.messages !== null) 
  return (
    <ScrollArea speed={0.8} className="area" contentClassName="content">
      <Messages  messages={this.state.messages} />
    </ScrollArea>
  );
}else{

  return (
    <ScrollArea speed={0.8} className="area" contentClassName="content">
      <EmptyMessages />
    </ScrollArea>
  );
}

简单的区别是：

(基本上只是将Messages的标题移到父MessageSection中)

1. 从滚动子组件(Messages)中提取标题。
2. 将标题放在ScrollArea上方
3. 然后，为了呈现新的JSX，-I将头和ScrollArea包装在一个新的div ("messages")中。

之后：(什么！你不工作吗？)

MessageSection.js

if(this.state.messages !== null) {
  return (
    <div className="messages">
      <div className ="messages-section-header">
        <span className="header">{this.props.name}</span>
      </div>
      <ScrollArea speed={0.8} className="area scrollarea-flex" contentClassName="content">
        <Messages  messages={this.state.messages} />
      </ScrollArea>
    </div>
  );
}else{
  return (
    <div className="messages">
      <ScrollArea speed={0.8} className="area scrollarea-flex" contentClassName="content">
        <EmptyMessages />
      </ScrollArea>
    </div>
  );
}

错误：

重组之后，我从ScrollArea.jsx#L222那里得到了这个错误

Uncaught :无法读取属性“offsetHeight”

错误的原因：

当可滚动组件Messages 安装在它的 componentDidMount 中时，它尝试使用 ScrollArea 组件的公开上下文滚动到底部，但是<ScrollArea组件中的 refs 在E 258 ScrollArea E 162中不存在。这很奇怪，因为如果稍后被refs componentDidUpdate调用，就会存在。

下面是发生故障的子组件，以供参考。

MessageList.js(Scroll-able组件，它在挂载时尝试滚动到底部)

contextTypes: {
  scrollArea: React.PropTypes.object //Used by the Library to Access the Scrolling Panel(The Parent Component)
},

componentDidMount: function() {
    this._scrollToBottom(); 
},

_scrollToBottom: function() {
    var scrollHeight = this.refs.messages.scrollHeight; 
    this.context.scrollArea.scrollYTo(scrollHeight);//ERROR -the refs will not exist inside context as expected
}

：为什么我感到困惑：

它的子ScrollArea Messages 也可以被挂载并调用公开给它的定义上下文 ScrollArea ，而 ScrollArea 的参考文献却不存在？这是双重困惑，因为它在我做小改动之前就起作用了。。

问题：

代码结构中的简单更改如何导致上下文无法访问它的参考

Answer 1

父组件直到所有的子组件都被“挂载”之后才会被“挂载”。因此，您的ScrollArea在执行Message componentDidMount时仍处于“挂载”过程中。

您的问题是您对交互进行建模的结果:您有一个“子”组件来指示某些父组件的行为。如果您让父组件负责此滚动行为，那么一切都会正常工作。

具体来说，向您的componentDidMount组件中添加一个MessageSection方法，并将逻辑放在那里：

componentDidMount: function() {
    // Assume you add `ref="messages"` to your render method so you can
    // get a reference to the child component
    this.refs.messages._scrollToBottom();
}