Reactjs 在Typescript中处理高阶组件中的道具

我在登录组件中传递道具，该组件被包装在另一个组件“FormHandle”中，该组件本身在React using TypeScript中传递道具。但在登录组件中，会抛出以下错误：

 [ts] `Property 'loginLabel' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<(Anonymous class)> & Readonly<{ children?: ReactNo...'.`

现在，当我将LoginForm调用为：-

<LoginForm loginLabel="Login" passwordLabel="password"/>

它给出了上述错误

包装器的代码是：-

import * as React from "react";

// This higher order component wraps FORM functionality
function HandleForm(Form: any, callAction: (state: object) => void) {
  return class extends React.Component<object, {}>{
    constructor(props: any) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {};
    }

    handleChange(e: any) {
      const { value, name } = e.target;
      this.setState({ [name]: value });
    }

    handleSubmit(e: any) {
      e.preventDefault();
      let state = this.state;
      callAction(state);
    }

    render() {
      return <Form {...this.props} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />;
    }
  };
}

export default HandleForm;

import*as React from“React”；
//此高阶组件包装表单功能
函数HandleForm（Form:any，callAction:（state:object）=>void）{
返回类扩展了React.Component{
构造器（道具：任何）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.state={}；
}
handleChange（e:任何）{
const{value，name}=e.target；
this.setState（{[name]：value}）；
}
handleSubmit（e:任何）{
e、 预防默认值（）；
让state=this.state；
催缴行动（州）；
}
render（）{
返回；
}
};
}
导出默认HandleForm；

为了将道具类型转发到包装组件，您需要在HOC中添加一些通用魔法。此外，包装组件道具需要包含字段

handleChange

和

handleSubmit

，而生成的组件需要排除这些字段（因为它们是由HOC提供的）。要实现这一点，我们可以使用

Exclude

仅获取非

handleChange

和

handleSubmit

的键，并使用

Pick

从原始道具中拾取它们：

import * as React from 'react';

interface HandleFormProps {
  handleChange: (e: any) => void;
  handleSubmit: (e: any) => void;
}

// This higher order component wraps FORM functionality
// TProp  will be the props of the passed in component
function HandleForm<TProp extends HandleFormProps>(Form: React.ComponentType<TProp>, callAction: (state: object) => void) {
  // We return a component that pick only the properties that are not provided by the HOC
  return class extends React.Component<Pick<TProp, Exclude<keyof TProp, keyof HandleFormProps>>, {}>{
    constructor(props: any) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {};
    }

    handleChange(e: any) {
      const { value, name } = e.target;
      this.setState({ [name]: value });
    }

    handleSubmit(e: any) {
      e.preventDefault();
      let state = this.state;
      callAction(state);
    }

    render() {
      return <Form {...this.props} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />;
    }
  };
}

// Usage 
interface ILoginformProps {
  //below props coming from login component
  loginLabel: string;
  passwordLabel: string;
  // below props coming from form handler Heigher order component
  handleChange: () => void;
  handleSubmit: () => void;
}
// Sample component, add your own implementation 
class LoginComponent extends React.Component<ILoginformProps> {

}

const LoginForm = HandleForm(LoginComponent, () => { });
let d = <LoginForm loginLabel="Login" passwordLabel="password" />

import*as React from'React'；
接口手柄{
handleChange：（e:any）=>无效；
handleSubmit：（e:any）=>无效；
}
//此高阶组件包装表单功能
//TProp将是传入组件的支柱
函数HandleForm（形式：React.ComponentType，callAction:（状态：object）=>void）{
//我们返回一个组件，该组件只拾取HOC未提供的属性
返回类扩展了React.Component{
构造器（道具：任何）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.state={}；
}
handleChange（e:任何）{
const{value，name}=e.target；
this.setState（{[name]：value}）；
}
handleSubmit（e:任何）{
e、 预防默认值（）；
让state=this.state；
催缴行动（州）；
}
render（）{
返回；
}
};
}
//用法
接口ILoginformProps{
//下面是来自登录组件的道具
loginLabel:string；
密码标签：字符串；
//下面是来自表单处理程序Heigher order组件的道具
handleChange:（）=>无效；
handleSubmit:（）=>无效；
}
//示例组件，添加您自己的实现
类LoginComponent扩展了React.Component{
}
const LoginForm=HandleForm（LoginComponent，（）=>{}）；
设d=

您能告诉我们包装的代码吗？如果是自定义的，则HOC本身会很有用。@TitianCernicova Dragomir，我已经添加了包装代码。谢谢，@Titian，您的解决方案方法很有用。

import * as React from 'react';

interface HandleFormProps {
  handleChange: (e: any) => void;
  handleSubmit: (e: any) => void;
}

// This higher order component wraps FORM functionality
// TProp  will be the props of the passed in component
function HandleForm<TProp extends HandleFormProps>(Form: React.ComponentType<TProp>, callAction: (state: object) => void) {
  // We return a component that pick only the properties that are not provided by the HOC
  return class extends React.Component<Pick<TProp, Exclude<keyof TProp, keyof HandleFormProps>>, {}>{
    constructor(props: any) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {};
    }

    handleChange(e: any) {
      const { value, name } = e.target;
      this.setState({ [name]: value });
    }

    handleSubmit(e: any) {
      e.preventDefault();
      let state = this.state;
      callAction(state);
    }

    render() {
      return <Form {...this.props} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />;
    }
  };
}

// Usage 
interface ILoginformProps {
  //below props coming from login component
  loginLabel: string;
  passwordLabel: string;
  // below props coming from form handler Heigher order component
  handleChange: () => void;
  handleSubmit: () => void;
}
// Sample component, add your own implementation 
class LoginComponent extends React.Component<ILoginformProps> {

}

const LoginForm = HandleForm(LoginComponent, () => { });
let d = <LoginForm loginLabel="Login" passwordLabel="password" />