Наследование в реактивном компоненте

Question

Пожалуйста, рассмотрите следующий случай:

Я создал компонент baseUser, который представляет собой форму с тремя полями: имя пользователя, пароль и имя. Теперь я хочу эту форму в трех разных приложениях: Приложение1, Приложение2 и Приложение3.

1. В Application1 компонент User должен использовать этот компонент baseUser, но ему нужно только два поля (имя пользователя, пароль) из состояния baseUser, а также иметь два дополнительных поля: имя-фамилия и фамилия.
2. В Application2 и Application3 компонент User должен работать так же, как baseUser.
3. Также все действия, события, состояния должны быть в состоянии работать в одиночку и иметь возможность переопределения.

Метод рендеринга также должен быть переопределен, поскольку они могут быть разными пользовательскими интерфейсами для разных приложений.

Как мы можем достичь этой функциональности, используя реагирующие компоненты? Вызывает ли наследование «baseUser» в приложениях, использующих «extends», какие-либо проблемы (или это правильный способ сделать это)?

Answer 1

Вы можете написать своего пользователя базы следующим образом:

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>
       );
    }
}

Answer 2

React не использует Inheritance. Вы не можете расширить компонент реакции. Реагируют в основном на работу Composition. Композиция означает создание мелких деталей и объединение их в одну целую деталь.

Теперь, в вашей ситуации. В вашем baseUsr компоненте всего 3 поля ввода, и вы хотите использовать только два из них в вашем application1. Просто ты не можешь этого сделать. Вы должны сделать полный baseUsr компонент.

Вы неправильно поняли понятие компонентов. Подумайте о таких компонентах, как функция или часть пользовательского интерфейса, которые являются абстрактными или могут использоваться автономно. Например, вы можете создать компонент Header, поскольку он может использоваться изолированно и на нескольких страницах. Но поле input в form нельзя использовать изолированно.

Эта путаница возникает из-за того, что вы создаете компоненты точно так же, как классы в javascript, но они являются основным строительным блоком пользовательского интерфейса. Для получения дополнительной информации читайте Композиция VS наследование по документам React