Reactjs 如何在React中将继承转换为组合（示例）？

我有两种表格：

和

。两者都有

用户名

和

密码

，注册表单也有

名称

字段。还有一个

登录

按钮和一个

注册

按钮。他们共享的共同代码只是

用户名

和

密码

，因此我想重构我的代码，使其具有一个组件

，并在

和

中使用它

到目前为止我所做的工作（伪代码）：

类用户名密码扩展{
构造函数（）{
this.state={username:，password:}
}
render（）{
返回
设置状态（用户名：e.value）
设置状态（密码：e.value）
}
类登录扩展UsernamePassword{
render（）{
返回
{super.render（）}
this.state.username&&this.state.password&&signIn（）/>
}
类寄存器扩展UsernamePassword{
构造函数（）{
此.state={
…这个州，
姓名：“
}
}
render（）{
返回
设置状态（名称：e.value）
{super.render（）}
this.state.username&&this.state.password&&this.state.name&&signUp（）/>
}

---

我一点也不喜欢这段代码。它似乎真的很难扩展。如何使用合成来做到这一点？

有很多方法可以处理这一点。您可以创建一个接受道具（在本例中，是用户名和密码）的组件并处理值的操作。它随后会触发某种类型的

onChange

事件，通知父级更改，父级可以管理状态。或者，您可以管理组件中的状态，只需创建一个事件处理程序道具，用于向状态的父级组件发出警报。我制作了一个seco基于代码的nd场景（为了简单起见，将基于类的组件更改为基于功能的组件）：

import React，{useState}来自“React”；
导入“/styles.css”；
const UsernamePassword=（{onChange}）=>{
const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
const handleChange=（）=>onChange（{username，password}）；
返回(
setUsername（e.target.value）}/>
setPassword（e.target.value）}/>
点击我！
);
};
常量登录=（）=>{
const onChange=（value）=>console.log（“Login”，value）；
返回(
登录
);
};
常量寄存器=（）=>{
const onChange=（value）=>console.log（“Register”，value）；
返回(
登记
);
};
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

class UsernamePassword extends React {
    constructor() {
        this.state = {username: "", password: ""}
    }

    render() {
        return <div>
            <input username onChange => setState(username: e.value)
            <input password onChange => setState(password: e.value)
        </div>
}

class Login extends UsernamePassword {

     render() {
        return <>
           { super.render() }
           <button onClick => this.state.username && this.state.password && signIn() />
}

class Register extends UsernamePassword {
     constructor() {
           this.state = {
               ...this.state,
               name: ""
            }
     }
     render() {
        return <>
           <input name onChange => setState(name: e.value)
           { super.render() }
           <button onClick => this.state.username && this.state.password && this.state.name && signUp() />
}

import React, { useState } from "react";
import "./styles.css";

const UsernamePassword = ({ onChange }) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleChange = () => onChange({ username, password });

  return (
    <div>
      <input value={username} onChange={(e) => setUsername(e.target.value)} />
      <input value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleChange}>Click me!</button>
    </div>
  );
};

const Login = () => {
  const onChange = (value) => console.log("Login", value);

  return (
    <>
      <h2>Login</h2>
      <UsernamePassword onChange={onChange} />
    </>
  );
};

const Register = () => {
  const onChange = (value) => console.log("Register", value);

  return (
    <>
      <h2>Register</h2>
      <UsernamePassword onChange={onChange} />
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Register />
      <Login />
    </div>
  );
}