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

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

  <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

添加onScroll钩子到第三方reactJS组件

1 个答案: