javascript - 如何在我的反应滑块中设置显示弹性？

Question

这是我的滑块

<Slider {...settings}>
  <div style={{ 'display': 'flex !important' }}>
    <ArrowsToolComponent key={name} color={color} />
    <ZoomTool key={name} color={color} />
  </div>
  <div>
    <GridToolComponent key={name} color={color} />
    <CropToolComponent disabled={disabled} key={name} color={color} />
  </div>
  <div>
    <FlipTool disabled={disabled} key={name} color={color} />
    <PriorityToolComponent disabled={disabled} key={name} color={color} />
  </div>
  <div>
    <CopyFileToolComponent disabled={false} key={name} color={color} />
    <CancelFileToolComponent disabled={disabled} key={name} color={color} />
  </div>
  <div>
    <InsertTextBox key={name} color={color} />
    <InsertImageBox key={name} color={color} />
  </div>
</Slider>

如何将 display: flex 设置为滑块中的 div？react-slick 文档中没有关于它的信息。默认情况下它总是内联块。

标签： javascriptcssreactjsreact-slick

Answer 1

在使用 React 编写组件时，我们可以接受除所需之外的不同 props ，并在我们的组件中解构它们。看来这个库确实支持传递style props。

如果没有默认道具，您将能够使用 Reactstyle属性，例如：

<Slider {...settings} style={{ display: 'flex' }}>
   { /* rest of the code */}
</Slider>

如果组件有defaultProps，React 使用它们渲染组件， 除非父级覆盖它。因此，您还可以使用所需样式创建父<div>级，可以是：

<div style={{ display: 'flex' }}>
 <Slider {...settings}>
   { /* rest of the code */}
 </Slider>
</div>

• React.js 关于渲染元素的文档。