您可以查看下面的实现

import React, { useState } from "react";

const Input = () => <input />; //input component

const Component = () => {
  const [inputs, setInputs] = useState([]); //create a state to keep all generated inputs

  return (
    <div>
      //re-render all inputs whenever we have a new input
      {inputs.map((Input, index) => (
        <Input key={index} />
      ))}
      //set a new input into the input list
      <button onClick={() => setInputs([...inputs, Input])}>Generate input</button>
    </div>
  );
};

export function App() {
  return <Component />;
};

the playground

const [input, setInput] = useState([<input defaultValue={1} />]);
  return (
    <div>
      {input.map((item, index) => (
        <div key={`input-${index}`}>{item}</div>
      ))}
      <button
        className="block p-5 mx-4 rounded-lg bg-emerald-600"
        onClick={() => {
          setInput([...input, <input defaultValue={input.length + 1} />]);
        }}
      >
        Append
      </button>
    </div>
  );