使用styled-components实现Tooltip组件多方位变体的问题求助

一、修复当前报错 #

你代码里的错误原因很明确：当variants[props.direction]存在时，你把字符串类型的props.direction赋值给了TooltipComponent，而非对应的组件实例，导致React无法识别它为可渲染的组件。

修正后的代码：

// 定义方向类型，保证类型安全
type Direction = 'top' | 'right' | 'bottom' | 'left';

const variants = {
  top: Styled.TooltipTop,
  right: Styled.TooltipRight,
  bottom: Styled.TooltipBottom,
  left: Styled.TooltipLeft,
};

// 直接取对应组件，不存在则用默认值
const TooltipComponent = variants[props.direction as Direction] || Styled.TooltipTop;

之后在渲染时直接使用<TooltipComponent />即可，此时TooltipComponent是合法的React组件，不会再报构造/调用签名的错误。

二、更优雅的变体实现方式 #

维护四个独立组件会增加代码冗余，推荐直接通过props控制单个Tooltip组件的样式，有两种常用方式：

方式1：通过props动态生成样式 #

import styled from 'styled-components';

type TooltipProps = {
  direction: 'top' | 'right' | 'bottom' | 'left';
};

const Tooltip = styled.div<TooltipProps>`
  /* 基础通用样式 */
  position: absolute;
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;

  /* 根据方向动态设置定位 */
  ${({ direction }) => {
    switch (direction) {
      case 'top':
        return `
          bottom: 100%;
          left: 50%;
          transform: translateX(-50%);
          margin-bottom: 8px;
        `;
      case 'right':
        return `
          left: 100%;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 8px;
        `;
      case 'bottom':
        return `
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          margin-top: 8px;
        `;
      case 'left':
        return `
          right: 100%;
          top: 50%;
          transform: translateY(-50%);
          margin-right: 8px;
        `;
      default:
        return '';
    }
  }}
`;

使用时只需传入direction属性：

<Tooltip direction="right">这是右侧提示</Tooltip>

方式2：使用styled-components的variants API（v5.3+支持） #

如果你的styled-components版本在v5.3及以上，可以用官方提供的variantsAPI更结构化地管理变体：

import styled, { css, variants } from 'styled-components';

type TooltipProps = {
  direction: 'top' | 'right' | 'bottom' | 'left';
};

const Tooltip = styled.div<TooltipProps>`
  /* 基础通用样式 */
  position: absolute;
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;

  /* 变体样式定义 */
  ${variants({
    direction: {
      top: css`
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 8px;
      `,
      right: css`
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 8px;
      `,
      bottom: css`
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 8px;
      `,
      left: css`
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 8px;
      `,
    },
  })}
`;

这种方式代码结构更清晰，适合管理多维度的样式变体。

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