如何将帮助文本传递给打字稿反应组件？答案

【问题标题】：How to pass helper text into typescript react component?如何将帮助文本传递给打字稿反应组件？
【发布时间】：2022-12-07 05:06:06
【问题描述】：

我正在使用 React 和打字稿创建输入组件。我已经设法完成了输入和占位符，但我仍然需要在底部添加帮助文本，所以它说，请提供有效的电子邮件地址”。你能告诉我如何将这个属性添加为道具吗？我试着像下面这样添加：

import { Meta } from '@storybook/react';

import Input from './Input';

const meta: Meta = {
  title: 'Input',
  component: Input,
};

export default meta;

export const Default = {
  render: () => (
    <>
      <h1>{'email:'}</h1>
      <input placeholder={'Type your email'}></input>
      {'Please provide valid email address'}
    </>
  ),
};

但我认为可能有更好的方法。你能检查一下并提出建议吗？

文本将在故事书中显示如下：

import { Meta } from '@storybook/react';

import Input from './Input';

const meta: Meta = {
  title: 'Input',
  component: Input,
};

export default meta;

export const Default = {
  render: () => (
    <>
      <h1>{'email:'}</h1>
      <input placeholder={'Type your email'}></input>
      {'Please provide valid email address'}
    </>
  ),
};

对于样式，稍后我将使用 tailwind 更新它们。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

尝试这样的事情。为了更好地理解，我将留给有关如何创建 whats-a-story 的故事书文档

// eg inside Input component file
// export interface InputProps {
//     placeholder: string;
// }


import Input, { InputProps } from './Input'

export default {
  title: 'Input',
  component: Input,
};

const Template = args => (
  <Input {...args} />
);

const defaultArgs: InputProps = {
  placeholder: "Please provide valid email address",
};

export const Default = Template.bind({});
Default.args = { ...defaultArgs };

【讨论】：