你可以使用if语句或者三进制来返回不同的jsx，看起来像这样，还有其他的方法，但是这是你可以做的事情的一个基本例子。

<>
   {
    shouldShow ?
   (
     <div id="content" className="content">
      <h1 className="title">Work Experience</h1>
      <div className="work-experience">
        <p>Job Title: {workExperience[0].title}</p>
        <p>Company: {workExperience[0].company}</p>
        <p>Location: {workExperience[0].location}</p>
        <p>Description: {workExperience[0].description}</p>
      </div>
    </div>
  <button className="form-btn">+ Add Work Experience</button>
 ) : (
  <form>
    <label for="title">Job Title</label>
    <input id="title" className="form-row" type="text" name="title" />
    <label for="company">Company</label>
    <input className="form-row" type="text" name="company" />
    <label for="location">Location</label>
    <input className="form-row" type="text" name="location" />
    <label for="description">Job Description</label>
    <textarea rows="4" cols="50" name="description"></textarea>
    <button className="save">Save</button>
    <button className="cancel">Cancel</button>
  </form>
 )
}
</>

Where shouldShow决定表单是否显示，这样做的好处是如果表单显示，其他内容就不会添加到DOM中，反之亦然。
shouldShow是一个可以添加到state的变量，当单击按钮时，您将切换state变量，从而导致重新呈现。
https://reactjs.org/docs/state-and-lifecycle.html
您还可以选择根据组件是否显示来呈现样式，关键是重新呈现组件的布尔状态变量。

使用留级猫增加用户工作体验，这样操作起来很简单。

中继器组件

import React from "react";

const Repeater = ({ inputFields, setInputFields }) => {
  const handleFormChange = (index, event) => {
    let data = [...inputFields];
    data[index][event.target.name] = event.target.value;
    setInputFields(data);
  };

  const removeFields = (index) => {
    let data = [...inputFields];
    data.splice(index, 1);
    setInputFields(data);
  };

  return (
    <div className="row">
      {inputFields.map((input, index) => {
        return (
          <>
            <div className="form-group col-sm-12 col-md-4 mb-3">
              <div className="controls">
                <input
                  type="text"
                  className="form-control inputset"
                  id="title"
                  placeholder="title"
                  name="title"
                  data-validation-required-message="This  field is required"
                  aria-invalid="true"
                  required
                  value={input.title}
                  onChange={(event) => handleFormChange(index, event)}
                />
                <div className="help-block" />
              </div>
            </div>
            <div className="form-group col-sm-12 col-md-4 mb-3">
              <div className="date-picker">
                <input
                  type="text"
                  className="pickadate form-control inputset"
                  value={input.company}
                  onChange={(event) => handleFormChange(index, event)}
                  name="company"
                  id="pass"
                  data-validation-required-message="This  field is required"
                  data-toggle="tooltip"
                  data-trigger="hover"
                  data-placement="top"
                  data-title="Date Opened"
                  data-original-title=""
                  required
                />
              </div>
            </div>
            <div className="form-group col-sm-12 col-md-4 d-flex mb-3">
              <input
                type="text"
                className="form-control inputset"
                id="location"
                placeholder="location"
                name="location"
                data-validation-required-message="This  field is required"
                aria-invalid="true"
                required
                value={input.location}
                onChange={(event) => handleFormChange(index, event)}
              />
               <input
                type="text"
                className="form-control inputset"
            id="description"
                placeholder="description"
                name="description"
                data-validation-required-message="This  field is required"
            aria-invalid="true"
            required
            value={input.description}
            onChange={(event) => handleFormChange(index, event)}
          />
              {inputFields.length === 1 ? null : (
            <button
              type="button"
              className=" d-flex justify-content-center align-items-center ml-1 btn"
              onClick={() => {
                removeFields();
              }}
            >
              <i className="uil-trash-alt" />
            </button>
          )}
        </div>
      </>
        );
      })}
    </div>
  );
};

export default Repeater;

主要组件

使用这些作为状态并将对象传递给Repeater组件。首先，状态为空，当用户单击按钮添加更多体验时，文件自动显示。

const [inputFields, setInputFields] = useState([
  { degree_title: "", institue: "", end_date: "" },
]);


 const addFields = () => {
 let newfield = { degree_title: "", institue: "", end_date: "" };

 setInputFields([...inputFields, newfield]);
};

<Repeater
 inputFields={inputFields}
 setInputFields={setInputFields}
 addFields={addFields} />

我希望这个解决方案对您有所帮助：）确保根据您的要求更改状态对象。