Question

我最近开始使用React和Redux。经常与我的大脑混淆的一件事是如何从基于我的功能代码库编写的文档中重写所有代码示例。

我现在处于其中一种情况;我无法找到一种方法来调用我在其中一个组件中使用的属于react-custom-scrollbars（link to docs）的方法。以下是该组件的简化版本。我已经注释了我想要调用方法scrollToBottom()的部分。

加分问题：如果我跳过使用onUpdate()事件，如果我想在scrollToBottom()数组附加消息时调用messages，我将如何继续？

const Chat = ({messages, app, keyDown, pressSend, setMessage, toggleEnter}) => {

  return (
    <div id="orbit-chat-content">
      <Scrollbars
        onUpdate={() => {
          //
          // HERE I WANT TO SCROLL TO BOTTOM
          //
          // this.scrollToBottom()
          //
        }}
        className="react-scrollbar">
        <div id="orbit-chat-conversation">
          { messages.map(message => <Message {...message} />) }
        </div>
      </Scrollbars>
    </div>
  );
};

export default Chat;

非常感谢你花时间看看这个！

Answer 1

你的问题的答案：

无状态组件没有引用。您通常用它来访问滚动条实例。

你真正的问题：

...如何重写全部来自通常是书面对象的文档的代码示例基于我的功能代码库。

你不必。 Statefull组件不会被弃用。他们是基地。 PureRender组件/功能组件只是堆栈的一个补充，提供了一种编写小型独立组件的方法，如 Button 。

当然，您只能使用无状态组件编写整个应用程序，但如果您需要内部状态，访问实例，某些内部逻辑，您也可以使用普通组件。

如何在编写函数反应时调用JSX元素上的方法

1 个答案: