反应组件中的继承答案

【问题标题】：Inheritance in react component反应组件中的继承
【发布时间】：2019-10-27 23:10:28
【问题描述】：

请考虑以下情况：

我创建了一个“baseUser”组件，它是一个包含三个字段用户名、密码和名称的表单。现在我想在三个不同的应用程序中使用此表单：Application1、Application2 和 Application3。

在 Application1 中，用户组件应该使用这个 baseUser 组件，但只需要来自 baseUser 状态的两个字段（用户名、密码），并且还应该有两个附加字段，即名字和姓氏。
在 Application2 和 Application3 中，User 组件应该与 baseUser 一样工作。
此外，所有操作、事件、状态都应该能够单独工作并且能够被覆盖。

render 方法也应该被覆盖，因为它们可以是不同应用程序的不同 UI。

我们如何使用 React 组件来实现这个功能？在使用“扩展”的应用程序中继承“baseUser”是否会导致任何问题（或者它是正确的做法）？

【问题讨论】：

您可以通过提供每个组件的特定需求，制作一个带参数的通用组件并将其呈现在 app1、app2 和 app3 中。例如，对于 app1，只需传递 uname、pwd 和 name，并且基于参数，公共组件将返回那么多字段。同样适用于每个 app2 和 app3 组件。

标签： reactjs react-redux react-component

【解决方案1】：

React 不使用Inheritance。你不能扩展一个反应组件。 React 基本上在Composition 上工作。组合意味着，创建小部分并将它们组合在一起以形成一个完整的部分。

现在，在你的情况下。 baseUsr 组件中只有 3 个输入字段，而您只想在 application1 中使用其中的两个。根本无法做到这一点。你必须渲染完整的baseUsr 组件。

您对组件的概念有误。考虑抽象的或可以独立使用的功能或 UI 的一部分等组件。例如，您可以创建一个Header 组件，因为它可以单独使用，并且可以在多个页面上使用。但是form 中的input 字段不能单独使用。

造成这种混乱是因为您创建的组件就像 javascript 中的类一样，但它们是 UI 的基本构建块。更多信息请阅读Composition VS inheritance on React docs

【讨论】：

你可以扩展一个 React 组件，在他们推荐使用功能组件之前就是这样。 React 现在不鼓励使用类继承，但如果你愿意，你可以这样做。

【解决方案2】：

你可以这样写你的 baseUser：

class BaseUserForm extends Component {

     handleChange = ({ currentTarget: input }) => {
        const data = { ...this.state.data };
        data[input.name] = input.value;
        this.setState({ data });  //state is in inheriated form.
      };

      handleSubmit = e => {
        e.preventDefault();

        //Form validation
        if (!errors) this.doSubmit();
      };

      renderInput = (name, label, type = "text") => {
        return (
          <Input
            name={name}
            label={label}
            type={type}
            error={this.state.errors[name]}
            value={this.state.data[name]}
            onChange={this.handleChange}
          />
        );
      };

      renderButton = (label, type = "submit") => {
        return (
          <button
            type={type}
            className="btn btn-primary"
            // disabled={this.validate()}
          >
            {label}
          </button>
        );
      };
    }

export default BaseUserForm;

然后根据您的应用程序，您可以根据需要添加/删除输入字段。

class AppForm extends BaseUserForm{
    state={
       data:{username:"",
             password:""}
       };

 doSubmit = () => {
      //Do your submit here.
  };

    render(){
       return(
         <form onSubmit={this.handleSubmit}>
           {this.renderInput("username", "User Name")}
           {this.renderInput("password", "Password")}
           //Add more field as needed.
         </form>
       );
    }
}

【讨论】：