Javascript 如何重写将另一个类扩展为功能组件的React类？

我有以下简单的代码，我正试图将其重写为一个函数，避免使用类，并使用钩子进行学习。 正如您在下面看到的，“应用程序”是对“表单”的扩展。完整的代码包括“Form”中的其他函数，例如，由“handleChange”调用并修改状态中的“errors”项的验证函数。 请注意，“表单”不是“应用程序”的一部分，因为表单将被其他组件（如登录组件）重用

我的主要问题是：

1-根据，他们似乎不鼓励使用继承，我如何在不使用“扩展”（并保留类）的情况下重写它

2-没有类我如何重写此内容？

到目前为止，我唯一想到的是将form.jsx中的所有函数重写为独立函数，并从App调用它们（见下文）。但这意味着要编写大量的道具和参数（特别是当验证被添加为“错误”、“设置错误”、“模式”等时），这些道具和参数将从“应用程序”发送到“renderInput”，从这里发送到“handleChange”等。 它可以工作，但代码不如以前干净

app.js

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

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

类应用程序扩展表单{
状态={
数据：{用户名：，密码：}，
};
render（）{
返回(
{this.renderInput（“用户名”、“用户名”）}
{this.renderInput（“密码”、“密码”、“密码”）}
);
}
}

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;

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

类表单扩展组件{
状态={
数据：{}，
};
handleChange=（{currentTarget}）=>{
const data={…this.state.data}；
数据[currentTarget.name]=currentTarget.value；
this.setState（{data}）；
};
renderInput（名称、标签、类型=“文本”）{
const{data，errors}=this.state；
返回(
);
}
render（）{
返回null；
}
}
导出默认表单；

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

const输入=（{name，label，…rest}）=>{
返回(
{label}
);
};

尝试将其更改为函数：

App.jsx

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

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

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

const-App=（）=>{
const[user，setUser]=useState（{username:，password:}）；
返回(
{renderInput（“用户名”、“用户名”、用户、设置用户）}
{renderInput（“密码”、“密码”、用户、设置用户、“密码”）}
);
};

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;

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

导出函数handleChange（{currentTarget}，data，setData）{
setData（{…数据，[currentTarget.name]：currentTarget.value}）；
}
导出函数renderInput（名称、标签、数据、setData、type=“text”）{
返回(
handleChange（e，data，setData）}
/>
);
}

---

提前感谢，如果您需要更好的解释或完整的代码，请告诉我。

将

表单

移动到

表单

组件，并传递输入属性数组以生成输入：

App.jsx

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

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

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

const-App=（）=>{
const[user，setUser]=useState（{username:，password:}）；
常量输入列表=[
{name:“username”，label:“username”，value:user.username}，
{名称：“密码”，标签：“密码”，值：user.password，键入：“密码”}
]
返回(
);
};

Form.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>     
  );

}

const Form=（{inputList，setData}）=>{
常量handleChange=（{currentTarget}）=>{
常量{name，value}=currentTarget；
setData（prevData=>（{…prevData，[名称]：值}））；
};
返回(
{
映射（{name，label，value，type=“text”}）=>
)
}
);
}