如何修改React的Banner组件，实现带外部链接的文本？

1. 调整Banner组件的Props类型 #

原组件的text仅支持字符串，我们需要将其改为支持React元素（JSX），以此兼容富文本内容。修改后的Banner组件代码：

import { oneOf, node } from "prop-types"
import * as Styled from "./Banner.styled"

const Banner = ({ variant, size, text }) => (
  <Styled.Banner variant={variant} size={size}>
    {text}
  </Styled.Banner>
)

Banner.propTypes = {
  text: node.isRequired, // 将string替换为node，支持JSX内容
  variant: oneOf(["complementary", "primary", "secondary"]), // 修正原重复的变体值
  size: oneOf(["small", "medium", "large"]), // 修正原重复的尺寸值
}

Banner.defaultProps = {
  variant: "complementary",
  size: "medium",
}

export default Banner

2. 创建适配Banner的链接组件 #

在Banner.styled.js中添加统一风格的链接组件，保证和Banner文本样式协调：

// Banner.styled.js
import styled from "styled-components"

export const Banner = styled.div`
  // 保留你原有Banner的样式逻辑
  padding: ${props => 
    props.size === "small" ? "8px 16px" : 
    props.size === "large" ? "16px 24px" : 
    "12px 20px"
  };
  background-color: ${props => 
    props.variant === "complementary" ? "#e3f2fd" : 
    props.variant === "primary" ? "#2196f3" : 
    "#ff9800"
  };
  color: ${props => 
    props.variant === "primary" ? "#fff" : 
    "#0d47a1"
  };
`

export const StyledLink = styled.a`
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.8;
  }

  // 针对不同Banner变体调整链接样式（可选）
  ${props => props.$variant === "primary" && `
    color: #bbdefb;
  `}
`

3. 在Storybook中使用带链接的Banner #

现在可以直接传入包含链接的JSX作为text属性：

// Banner.stories.js
import Banner from "./Banner"
import { StyledLink } from "./Banner.styled"

export default {
  title: "Components/Banner",
  component: Banner,
}

export const WithExternalLink = () => (
  <Banner
    variant="complementary"
    size="medium"
    text={
      <>
        我正在学习React，请点击<StyledLink href="https://react.dev" target="_blank" rel="noopener noreferrer">React官方文档</StyledLink>获取更多知识。
      </>
    }
  />
)

关键说明 #

• 将text的Prop类型改为node，是因为ReactNode支持字符串、JSX元素、数组等多种内容类型，完美适配富文本场景。
• StyledLink继承Banner的文本颜色，添加下划线和hover过渡效果，保证视觉一致性；target="_blank"和rel="noopener noreferrer"是外部链接的安全写法，避免页面跳转时的安全风险。
• 如果需要处理后端返回的带标记文本，可考虑使用dangerouslySetInnerHTML，但需注意防范XSS攻击，优先推荐直接传入JSX的方式。

内容的提问来源于stack exchange，提问作者Emilia