时间戳

首页 > 解决方案 > 如何在不将道具传递给该组件的情况下在组件内设置 div 样式（我正在使用包）

javascript - 如何在不将道具传递给该组件的情况下在组件内设置 div 样式（我正在使用包）

问题描述

我正在使用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 样式。我可以通过将道具传递给 < ScrollArea > 然后在已安装的包中使用它们来做到这一点；但我试图避免更改原始包内容。

另外，还有另一种方法可以让我通过点击滚动吗？还有其他人对那个 NPM 包有经验吗？

标签： javascriptreactjsstyles

解决方案

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

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

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

在一个.css文件中：

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

编辑：在您的情况下，您可以使用如下道具以编程方式更改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请注意，当下一个状态值取决于前一个状态时，使用函数来防止不一致。

推荐阅读