如何重寫將另一個類擴展為功能組件的 React 類？

Question

我有以下簡單的代碼，我試圖將它重寫為一個函數，避免類並使用鈎子進行學習。 正如您在下面看到的，“App”正在擴展“Form”。 完整的代碼包括'Form'中的其他函數，例如，一個由'handleChange'調用並修改狀態中'errors'項的驗證函數。 請注意，“Form”不是“App”的一部分，因為 Form 將被其他組件（例如登錄組件）重用。

我的主要問題：

1- 根據文檔，他們似乎不鼓勵使用繼承，如何在不使用“擴展”（並保留類）的情況下重寫它？

2-如何在沒有課程的情況下重寫它？

到目前為止，我想到的唯一想法是將 form.jsx 中的所有函數重寫為獨立的函數，並從 App 中調用它們（見下文）。 但這意味着要編寫很多道具和參數（特別是當驗證添加為“錯誤”、“設置錯誤”、“模式”等時，將從“App”發送到“renderInput”，從此處發送到“handleChange”等。它有效，但代碼不如以前干凈......

應用程序.js

class App extends Form {
  state = {
    data: { username: "", password: "" },
  };

  render() {
    return (
      <form action="">
        {this.renderInput("username", "Username")}
        {this.renderInput("password", "Password", "password")}
      </form>
    );
  }
}

表單.jsx

class Form extends Component {
  state = {
    data: {},
  };

  handleChange = ({ currentTarget }) => {
    const data = { ...this.state.data };
    data[currentTarget.name] = currentTarget.value;
    this.setState({ data });
  };

  renderInput(name, label, type = "text") {
    const { data, errors } = this.state;

    return (
      <Input
        name={name}
        type={type}
        value={data[name]}
        label={label}
        onChange={this.handleChange}
      />
    );
  }

  render() {
    return null;
  }
}

export default Form;

輸入.jsx

const Input = ({ name, label, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input {...rest} name={name} id={name} className="form-control" />
    </div>
  );
};

嘗試將其更改為函數：

應用程序.jsx

const App = () => {
  const [user, setUser] = useState({ username: "", password: "" });

  return (
    <form action="">
      {renderInput("username", "Username", user, setUser)}
      {renderInput("password", "Password", user, setUser, "password")}
    </form>
  );
};

表單.jsx

export function handleChange({ currentTarget }, data, setData) {
  setData({ ...data, [currentTarget.name]: currentTarget.value });
}

export function renderInput(name, label, data, setData, type = "text") {
  return (
    <Input
      name={name}
      type={type}
      value={data[name]}
      label={label}
      onChange={e => handleChange(e, data, setData)}
    />
  );
}

提前致謝，如果您需要更好的解釋或完整代碼，請告訴我。

Answer 1

將form移動到Form組件並傳遞一組輸入的屬性以生成輸入：

應用程序.jsx

const App = () => {
  const [user, setUser] = useState({ username: "", password: "" });

  const inputList = [
    {name: "username", label: "Username", value: user.username},
    {name: "password", label: "Password", value: user.password, type: "password"}
  ]

  return (
    <Form inputList={inputList} setData={setUser} />
  );
};

表單.jsx

const Form = ({ inputList, setData }) => {

  const handleChange = ({ currentTarget }) => {
    const { name, value } = currentTarget;
    setData(prevData => ({ ...prevData, [name]: value }));
  };

  return (
    <form action="">
      {
        inputList.map(({ name, label, value, type = "text" }) => 
          <Input
            key={name}
            name={name}
            type={type}
            value={value}
            label={label}
            onChange={handleChange}
          />
        )
      }
    </form>     
  );

}