javascript - 如何在我的 react slider 中设置显示柔性？

Question

这是我的 slider

<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 设置为 slider 中的 div？ React-slick 文档中没有关于它的信息。默认情况下它始终是内联 block 。

Answer 1

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

如果没有默认的 props，您将能够使用 React style属性，例如:

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

如果组件有defaultProps ，React 使用它们渲染组件，除非父级覆盖它。所以你也可以创建一个Parent <div>与您所需的样式，这可能是:

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

• 有关 Rendering elements 的 React.js 文档.