如何为React+TypeScript输入组件传递辅助文本作为Props？

1. 完善Input组件的Props定义与渲染逻辑 #

先在你的Input.tsx中定义包含辅助文本的Props类型，并实现条件渲染逻辑：

import React from 'react';

// 定义Input组件的Props类型
type InputProps = {
  placeholder?: string;
  // 添加辅助文本的可选属性
  helperText?: string;
  // 按需补充其他常用属性
  type?: string;
};

const Input: React.FC<InputProps> = ({ placeholder, helperText, type = 'text', ...rest }) => {
  return (
    <div className="space-y-1"> {/* Tailwind间距类，控制输入框与辅助文本的距离 */}
      <input
        type={type}
        placeholder={placeholder}
        className="px-3 py-2 border rounded-md" {/* 基础输入框样式，可按需调整 */}
        {...rest}
      />
      {/* 仅当辅助文本存在时渲染 */}
      {helperText && (
        <p className="text-sm text-red-500">{helperText}</p> {/* Tailwind样式：小号字体、红色提示 */}
      )}
    </div>
  );
};

export default Input;

2. 优化Storybook写法 #

你当前的Storybook代码直接使用原生<input>，没有复用自己封装的Input组件，这是核心问题。优化后通过Props传递参数，同时支持多场景预览：

import { Meta, StoryObj } from '@storybook/react';
import Input from './Input';

const meta: Meta<typeof Input> = {
  title: 'Input',
  component: Input,
  // 配置参数面板，方便实时调整属性
  argTypes: {
    helperText: { control: 'text', description: '输入框底部的辅助提示文本' },
    placeholder: { control: 'text' },
    type: { control: 'select', options: ['text', 'email', 'password'] },
  },
};

export default meta;
type Story = StoryObj<typeof Input>;

// 默认场景：不带辅助文本
export const Default: Story = {
  args: {
    placeholder: 'Type your text',
  },
};

// 邮箱输入场景：带验证提示
export const EmailWithHelperText: Story = {
  args: {
    type: 'email',
    placeholder: 'Type your email',
    helperText: 'Please provide valid email address',
  },
  render: (args) => (
    <div className="space-y-2">
      <h1 className="text-lg font-medium">email:</h1>
      <Input {...args} />
    </div>
  ),
};

关键优化点说明 #

• Props化辅助文本：将helperText设为可选Props，让组件适配不同提示场景，提升复用性
• Storybook规范复用：直接使用封装的Input组件，通过args传递Props，利用参数面板可实时调整属性预览效果
• Tailwind样式整合：在组件内用Tailwind类统一控制布局与样式，后续可按需修改（比如调整辅助文本颜色、输入框边框样式）
• 条件渲染：避免空节点，仅当helperText有值时才渲染提示文本

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