将onScroll挂钩添加到第三方reactJS组件

Question

我正在使用一个名为react-syntax-highlighter的第三方reactjs组件，我想开发一个日志记录功能，用于跟踪用户的滚动行为，用于研究目的。

但是，由于我使用的是第三方组件，如下所示：

<div className={this.props.className}>
       <SyntaxHighlighter language= {supportedLanguages.includes(this.state.language) 
         ? this.state.language : null}
         style={androidstudio} showLineNumbers={true}
         lineNumberStyle={lineNumberStyle}>
         {this.props.fileName ? this.state.code : 'Select a file'}
     </SyntaxHighlighter>
   <div className="select-language input-field">
      {languageSelection}
   </div>
 </div> 

我不确定如何添加一个钩子来从外部跟踪这个组件上的滚动事件。有人能帮我看一下吗？谢谢!

Answer 1

您可以为SyntaxHighlighter组件指定height，然后添加overflow-y: scroll。最后，向SyntaxHighlighter添加onScroll事件侦听器

  <SyntaxHighlighter
    className={"class1"}
    onScroll={() => console.log("scrolled")}
    language="javascript"
  >
    {'code string'}
  </SyntaxHighlighter>

class1 CSS：

.class1 {
  height: 100px;
  overflow-y: scroll;
}

下面是一个工作示例(打开底部的console查看结果)：

https://codesandbox.io/s/jj16m0nqm5