Question

是否可以在不必创建容器的情况下设置反应组件的样式？

这是我当前问题的一个例子。我总是需要将组件包装在容器/包装器中。像这样......

import React, { Component } from 'react';
import styled from 'styled-components';

const PitchSliderContainer = styled.input`
    text-align: right;
    float: right;
`;

const PitchSlider = () => <PitchSliderContainer
    type="range"
    min="0.9"
    max="1.1"
    step="any"
    onChange={this.props.onChange}
/>

export default PitchSlider;

有没有办法在不必创建容器的情况下设置PitchSlider的样式？

Answer 1

我认为你所做的是正确的方法。因为这是Styled Components的重点。创建可重复使用的演示文稿组件。在这里，您的PitchSliderContainer就是一个这样的样式input组件。您可以编写一个更通用的组件来接受某些道具，并根据道具呈现<input>。这样一个风格的组件也应该有一个名字。

您要求的内容可以通过其他方式完成。建议不要将此用于结构组件，但由于您的组件只有一个<input>标记，因此这应该没问题：

const PitchSlider = ({ className }) => <PitchSliderContainer
    type="range"
    min="0.9"
    max="1.1"
    step="any"
    onChange={this.props.onChange}
    className={className}
/>

export default styled(PitchSlider)`
  text-align: right;
  float: right;
`;

确保您收到className作为道具并将其传递给您的组件。

编辑：正如Phil Pluckthun所说，你也可以这样做：

const PitchSlider = styled.input.attrs({
  type: 'range',
  min: '0.9'
  max: '1.1'
  step: 'any'
  onChange: this.props.onChange
})`
  text-align: right;
  float: right;
`;

Answer 2

当您使用styled时，您使用HOC包装初始容器。这意味着styled函数返回的内容只是一个可以正常使用的常规 React 组件，并且无需额外的包装层即可接收 props 。它可以这样使用：

<ParentComponent>
  <PitchSliderContainer type='range' step='any' />
</ParentComponent>

请参阅this沙箱以查看您最初在页面中使用的组件。

styled-components：样式组件没有将它们包装在容器/包装器中？

2 个答案: