审查生成的状态卡片

React 19 高级 6分钟找出 5处问题

在这段生成的状态卡片处理生产数据前完成代码审查。

把不可信消息渲染成纯文本，使用限制范围后的数字色相值，支持紧凑变体，保留组件状态，而且不添加动画。

TSX

import styled from 'styled-components';

type Props = { hue: number; compact: boolean; message: string };

export function StatusCard({ hue, compact, message }: Props) {
  const Card = styled.article<{ hue: number; compact: boolean }>`
    color: hsl(${({ hue }) => hue} 70% 35%);
    padding: ${({ compact }) => (compact ? '0.25rem' : '0.75rem')};
  `;

  return (
    <Card
      hue={hue}
      compact={compact}
      dangerouslySetInnerHTML={{ __html: message }}
    />
  );
}

生成代码仅作示例，不代表任何特定模型

在试验场中打开

报告错误