javascript - 如何在组件内设置 div 样式而不将 props 传递给该组件(我正在使用包)

Question

我正在使用react-scrollbar包为我的内容呈现滚动条。我还想要一个箭头按钮，单击该按钮即可移动到某个滚动条区域。 问题是，我正在尝试在组件内设置类的样式(marginTop)。

这是我的尝试:

// MY COMPONENT

scrollToNextUpload = () => {
    const NextUpload = 400
    this.setState({ marginTop : this.state.marginTop + NextUpload }, () => document.getElementsByClassName('scrollarea-content')[0].style.marginTop = "'" + this.state.marginTop + "px'")
}

// MY RENDER
render () {
    <ScrollArea>
       // my content
       <div onClick={this.scrollToNext}></div>
    </ScrollArea>
}

实际渲染的内容

<div class='scrollarea'>
   <div class='scrollarea-content'>
      // my content
      <div onClick={this.scrollToNext}></div>
   </div>
</div>

我想要什么

为了使我的区域带有滚动条滚动，我必须向“scrollarea-content”添加 marginTop 样式。我可以通过将 props 传递给 然后在已安装的包中使用它们来做到这一点；但我试图避免更改原始包内容。

此外，还有另一种方法可以通过单击滚动吗？还有其他人有使用该 NPM 包的经验吗？

Answer 1

大多数库都提供将样式应用于子组件的 Prop ，在此库中，您可以将 className 传递给 contentClassName 或在 contentStyle Prop 中使用内联样式:

<ScrollArea contentStyle={{ marginTop: 10 }}>

另一种方法是编写 css 来向 scrollarea-content 类添加样式。

在 .css 文件中:

.scrollarea-content {
  margin-top: 10px;
}

编辑:在您的情况下，您可以使用如下 Prop 以编程方式更改 marginTop 样式:

scrollToNextUpload = () => {
    const NextUpload = 400;
    this.setState(prevState => ({ marginTop : prevState.marginTop + NextUpload }));
}

render () {
    <ScrollArea contentStyle={{ marginTop: this.state.marginTop }}>
       // my content
       <div onClick={this.scrollToNext}></div>
    </ScrollArea>
}

请注意使用函数 setState 来防止下一个状态值取决于前一个状态时出现不一致。