Question

我想重构一个现有的React应用并添加styled-components。问题是，我看到此功能的唯一方法是重命名所有现有功能组件，创建新样式的组件，并用旧名称命名，以便在使用它们构建应用程序时看起来相同

我将此组件从Button重命名为DefaultButton：

class DefaultButton extends React.Component {
  render() {
    return <button className={this.props.className}>
      {this.props.text}
    </button>;
  }
}

然后使用旧名称创建样式化的组件：

let Button = styled(DefaultButton)`
  color: ${props => props.theme.buttonStyles.color};
  background-color: ${props => props.theme.buttonStyles.backgroundColor};
`;

Button.defaultProps = {
  theme: {
    buttonStyles: {
      color: '#000',
      backgroundColor: '#ccc'
    }
  }
};

export default Button;

现在我可以像以前一样使用它了

<ThemeProvider theme={mytheme}>
  <div className="App">
    <Button text="Give me an answer here"></Button>
  </div>
</ThemeProvider>

是否可以添加新样式而不重命名所有现有组件？欢迎对以上代码进行任何改进/建议。

谢谢！

Answer 1

您无需重命名组件，只需将其写为

class Button extends React.Component {
  render() {
    return <button className={this.props.className}>
      {this.props.text}
    </button>;
  }
}

Button = styled(Button)`
  color: ${props => props.theme.buttonStyles.color};
  background-color: ${props => props.theme.buttonStyles.backgroundColor};
`;

Button.defaultProps = {
  theme: {
    buttonStyles: {
      color: '#000',
      backgroundColor: '#ccc'
    }
  }
};

export default Button;

有没有一种方法可以在React应用程序中使用样式化的组件而不重命名所有现有组件？

1 个答案: