Question

我经常创建使用styled-component样式的组件，这些组件仅包含单个元素，例如：

const StyledButton = styled.button({
  color: '#fff',
  borderRadius: '2px'
})

const Button = ({ children, ...rest }) => (
  <StyledButton {...rest}>{children}</StyledButton>
)

export default Button

拥有嵌套的组件感觉很多余。 是否有更简洁的方法来完成上述任务？

我尝试做一个export default，但是React开发工具无法识别该组件，并将其显示为“未知”。
据我所知，不可能将children传递给styled-component吗？

Answer 1

您不需要嵌套元素，可以直接将其导出。

<SomeComp {...rest}>{children}</SomeComp>

等效于

<SomeComp {...props} />

因此您无需分开孩子并将其嵌套。

Answer 2

如果您只想渲染子代并传递道具，则无需创建额外的Button组件。相反，您可以仅导出StyledButton并按以下方式使用它：

<StyledButton onClick={buttonProp}>Children you want</StyledButton>

使用这种方法，您可能会错过组件名称，它们在devtools中显示为styled.button。为了解决这个问题，根据版本有两种方法。

对样式化的组件使用babel plugin。您可以使用
进行安装
npm install --save-dev babel-plugin-styled-components

并将其添加到babel插件中来使用：

{ “ plugins”：[“ babel-plugin-styled-components”] }

如果您的4.0或更高版本，则可以使用babel macro 只需将导入更改为：

import styled from 'styled-components/macro';

const StyledButton = styled.button`
  color: red;
`

避免使用双元素和单元素组件

2 个答案: