我想为溢出的元素添加“显示更多”按钮，然后仅在单击更多鞋子后，才想显示新行

const { useState } = React;

function App() {
  // State for hiding and showing the extra rows
  const [showMore, setShowMore] = useState(false);

  let data = [
    {
      id: 1,
      name: "Color",
      value: [
        "red",
        "green",
        "yellow",
        "blue",
        "red",
        "green",
        "yellow",
        "blue",
        "red",
        "green",
        "yellow",
        "blue",
        "red",
        "green",
        "yellow",
        "blue",
        "red",
        "green",
        "yellow",
        "blue",
        "red",
        "green",
        "yellow",
        "blue"
      ]
    },
    {
      id: 2,
      name: "Size",
      value: [
        "standard",
        "medium",
        "small",
        "large",
        "Extra Large",
        "Extra Small"
      ]
    }
  ];

  return (
    <div style={{ margin: "5px" }}>
      {data.map((d) => {
        const isColor = d.name.toLowerCase().includes("color");
        const hiddenClass = isColor && !showMore ? "hide-rows" : "";
        return (
          <div key={d.id}>
            <div>{d.name}</div>
            {/* Extra span around the flex container to make the 
                flex container and the show more button inline */}
            <span style={{ display: "flex" }}>
              <div
                style={{ background: "aqua" }}
                // Set a class if the extra rows should be hidden
                className={"flex " + hiddenClass}
              >
                {d.value.map((val, index) => {
                  if (isColor) {
                    return (
                      <div
                        key={index}
                        // This class applies width/height/margin
                        // based on the variables
                        className="color-block"
                        style={{
                          background: val,
                          display: "inline-block"
                        }}
                      ></div>
                    );
                  }
                  return (
                    <button key={val} className="btn btn-primary m-2">
                      {val}
                    </button>
                  );
                })}
              </div>
              {/* Only display the button on the color section */}
              {/* It is super annoying to try and calculate to determine
                  if there's a need for the show more button.
                  Though doable if you know the size ahead of time*/}
              {isColor && (
                <button
                  className="btn btn-primary"
                  // The button needs to align itself to the top rather than default stretch
                  style={{ alignSelf: "flex-start", marginLeft: "5px" }}
                  // Toggle showing/hiding everything
                  onClick={() => setShowMore(!showMore)}
                >
                  {showMore ? "Show Less" : "Show More"}
                </button>
              )}
            </span>
          </div>
        );
      })}
    </div>
  );
}

ReactDOM.render(<App />,document.getElementById('root'))

.App {
  font-family: sans-serif;
  text-align: center;
}


/* Setup a flex grid to the color-block's parent to make 
   things render consistently */

.flex {
  display: flex;
  flex-wrap: wrap;
  /* Setup --size and --margin CSS variables */
  --size: 30px;
  --margin: 5px;
}


/* apply margin/width/height variables to the color blocks */

.color-block {
  margin: var(--margin);
  width: var(--size);
  height: var(--size);
}


/* When the extra rows should be hidden, set the height and no overflow
   Height is calculated based on the size + (margin * 2)
   This way things can be dynamically changed, but this will remain possible to use
   since we need to know the height in order to hide things in a reasonable way*/

.hide-rows {
  height: calc(var(--size) + var(--margin) * 2);
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="root" />