如何在 React TypeScript 中实现 e 和 props?

Posted

技术标签:

【中文标题】如何在 React TypeScript 中实现 e 和 props?【英文标题】:How to implement e and props in React TypeScript? 【发布时间】:2020-07-28 19:11:45 【问题描述】:

我有一个 JS 组件,我在其中定义了一些普通的 jsx 函数和状态,现在我想将它们用作 tsx 文件中的道具,但是因为我我是初学者,我很困惑。这是我想在 tsx 中实现的 js 版本:

export class FormUserDetails extends Component 
  continue = e => 
    e.preventDefault();
    this.props.nextStep();
  ;

  render() 
    const  values, handleChange  = this.props;
    return (
    ...
            <AppBar title="Enter User Details" />
            <TextField
              placeholder="Enter Your First Name"
              label="First Name"
              onChange=handleChange('firstName')
              defaultValue=values.firstName
              margin="normal"
                            fullWidth="true"
            />
...

如何在 React TypeScript 中实现这一点:

export class MainInfo extends Component<Props,>

或类似的?

沙盒:它有我想要实现的 tsx 文件,就像我的问题示例和定义我的道具的 JS 文件 https://codesandbox.io/s/tsx-rj694

【问题讨论】:

你能粘贴完整的文件吗? @vjr12 codesandbox.io/s/tsx-rj694 我上传了我想实现的 tsx 文件,比如我的问题和包含我的道具的主 JS 文件 【参考方案1】:

您需要为组件的 props 提供一个接口。对于FormUserDetails 的情况,您需要定义一个包含valueshandleChange 的接口或类型别名。

interface FormUserDetailsProps 
  values: 
    name: string; // include other required properties
  ;
  handleChange: (value: string) => void;


export class FormUserDetails extends Component<FormUserDetailsProps> 
  // do the rest here


【讨论】:

【参考方案2】:

您好,您可以通过这种方式为您的类组件创建类型

interface IProps 
 nextStep: () => void;
 values: 
    firstName: string
 ;
 handleChange: (value: string) => void


export class FormUserDetails extends Component<IProps> 
  continue = e => 
    e.preventDefault();
    this.props.nextStep();
  ;

  render() 
    const  values, handleChange  = this.props;
    return (
    ...
            <AppBar title="Enter User Details" />
            <TextField
              placeholder="Enter Your First Name"
              label="First Name"
              onChange=handleChange('firstName')
              defaultValue=values.firstName
              margin="normal"
                            fullWidth="true"
            />
...

【讨论】:

【参考方案3】:

但你也可以使用函数组件,因为它在使用 typescript 时更干净、更好、更易读:

interface IProps 
 nextStep: () => void;
 handleChange: (value: string) => void
 values: 
    firstName: string
 ;


const FormUserDetails = (props: IProps) => 
  const  values, handleChange, nextStep  = props;
  const continue = (e: any) => 
    e.preventDefault();
    nextStep();
  ;

    return (
        <AppBar title="Enter User Details" />
        <TextField
            placeholder="Enter Your First Name"
            label="First Name"
            onChange=handleChange('firstName')
            defaultValue=values.firstName
            margin="normal"
            fullWidth="true"
        />
)


【讨论】:

以上是关于如何在 React TypeScript 中实现 e 和 props?的主要内容,如果未能解决你的问题,请参考以下文章

我想在辅助函数中操作 React 类组件中存在的状态。我想在 Typescript 中实现相同的目标

如何在 TypeScript 中实现睡眠功能?

如何将 SignaturePad 与 React TypeScript 一起使用

如何在 vue 组件中实现 typescript 代码?

如何让一个类在 Typescript 中实现调用签名?

在 Typescript 中实现接口时如何定义私有属性?