reactjs - Styled Components 基于 props 渲染 Styled 标签
问题描述
我正在构建一个应用程序并希望拥有 Primary、Secondary 和 Tertiary 按钮,我不想创建 3 个单独的组件,它们相同但具有不同的样式组件,所以我想有条件地显示正确的标签,如下面的代码,但我收到一个错误 JSX 元素类型“ButtonStyles”没有任何构造或调用签名。我究竟做错了什么?谢谢
import React from "react";
import styled from "styled-components";
const PrimaryStyles = styled.button`
width: 26rem;
height: 5rem;
background-image: ${({ theme }) => theme.gradients.ry};
border: none;
border-radius: 4px;
color: ${({ theme }) => theme.black};
font-size: 2rem;
box-shadow: 3px 3px 30px ${({ theme }) => theme.red + "70"};
cursor: pointer;
padding: 0 1rem;
`;
const SecondaryStyles = styled.button``;
const TertiaryStyles = styled.button`
border: none;
background: none;
color: ${({ theme }) => theme.grey};
`;
interface IProps {
type: "button" | "reset" | "submit";
children: React.ReactNode;
onClick: React.MouseEventHandler<HTMLButtonElement>;
primary?: boolean;
secondary?: boolean;
tertiary?: boolean;
}
export const Button: React.FC<IProps> = ({
children,
onClick,
type,
primary = true,
secondary,
tertiary,
}) => {
const ButtonStyles = primary
? PrimaryStyles
: secondary
? SecondaryStyles
: tertiary
? TertiaryStyles
: null;
return (
<ButtonStyles type={type} onClick={onClick}>
{children}
</ButtonStyles>
);
};
解决方案
那是因为这个逻辑:
const ButtonStyles = primary
? PrimaryStyles
: secondary
? SecondaryStyles
: tertiary
? TertiaryStyles
: null;
如果不是primary
,secondary
或者tertiary
它将是null
。所以你的代码将设置ButtonStyles
为NULL
然后你不能这样做:
return (
<ButtonStyles type={type} onClick={onClick}>
{children}
</ButtonStyles>
);
对此的解决方案是删除该NULL
选项,例如:
const ButtonStyles = primary
? PrimaryStyles
: secondary
? SecondaryStyles
: TertiaryStyles;
另一种避免三元条件运算符的方法是这样做:
- 创建一个包含 3 个样式选项的对象:
interface IButtonStyles {
[key: string]: StyledComponent<"button", any, {}, never>;
}
const buttonStyleTypes: IButtonStyles = {
primary: PrimaryStyles,
secondary: SecondaryStyles,
tertiary: TertiaryStyles,
};
- 将您的 IProps 更改为以下内容:
interface IProps {
type: "button" | "reset" | "submit";
children: React.ReactNode;
onClick: React.MouseEventHandler<HTMLButtonElement>;
styleType?: string;
}
- Button 组件对此:
const Button: React.FC<IProps> = ({
children,
type,
styleType = "primary",
}) => {
const ButtonStyles = buttonStyleTypes[styleType];
return <ButtonStyles type={type}>{children}</ButtonStyles>;
};
- 最后,您可以像这样创建按钮:
<Button type={"button"}>primary</Button>
<Button type={"button"} styleType='secondary'>secondary</Button>
<Button type={"button"} styleType='tertiary'>tertiary</Button>
推荐阅读
- amazon-web-services - aws 私有子网访问
- vb.net - 表单之间的启动画面
- python - 没有名为“glob2”的模块
- javascript - 你如何用winston捕捉`错误:ENOENT:没有这样的文件或目录`?
- node.js - Passport Facebook 身份验证返回未定义?
- vba - 字符串案例的不选择案例的案例
- c - Knight tours算法C实现性能
- python - TypeError:尝试运行机器人命令时,“str”对象不可调用
- html - 悬停在父级上以触发变换属性
- python - ValueError:无法为有效的 JSON 文件解码任何 JSON 对象