React 中基於 Material UI 中 IconButton 組件的 onClick 屬性的條件渲染

Question

import "./styles.css";
import React, { useState } from "react";
import { IconButton } from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

export default function App() {
  const [expand, setExpand] = useState({
    arrowA: false,
    arrowB: false,
    arrowC: false,
    arrowD: false
  });

  const handleChange = (e) => {
    setExpand({
      ...expand,
      [e.currentTarget.name]: !expand.arrowA,
      [e.currentTarget.name]: !expand.arrowB,
      [e.currentTarget.name]: !expand.arrowC,
      [e.currentTarget.name]: !expand.arrowD
    });
  };

  return (
    <div className="App">
      <h1>React conditional rendering</h1>
      <h2>
        The component below should render if the user clicks on the arrow, and
        be removed if the user clicks the arrow again.
      </h2>

      <h5>
        This arrow should show the first part of the text.{" "}
        <IconButton
          variant="contained"
          size="small"
          color="primary"
          aria-label="expand"
          name="arrowA"
          onClick={handleChange}
        >
          {<ExpandMoreIcon />}
        </IconButton>
      </h5>

      <h5>
        This arrow show the second part of the text if clicked, and be possible
        to remove.
        <IconButton
          variant="contained"
          size="small"
          color="primary"
          aria-label="expand"
          name="arrowB"
          onClick={handleChange}
        >
          {<ExpandMoreIcon />}
        </IconButton>
      </h5>

      <h5>
        This arrow should show the third part of the text below.{" "}
        <IconButton
          variant="contained"
          size="small"
          color="primary"
          aria-label="expand"
          name="arrowC"
          onClick={handleChange}
        >
          {<ExpandMoreIcon />}
        </IconButton>
      </h5>

      <h5>
        This was really the last part.{" "}
        <IconButton
          variant="contained"
          size="small"
          color="primary"
          aria-label="expand"
          name="arrowD"
          onClick={handleChange}
        >
          {<ExpandMoreIcon />}
        </IconButton>
      </h5>
      {expand.arrowA ? (
        <h2>
          This is the first start of the story, let's see if we can add the
          rest.
        </h2>
      ) : null}

      {expand.arrowB ? (
        <h2>This is the middle part, it starts to break soon.</h2>
      ) : null}
      {expand.arrowC ? (
        <h2>
          We are nearing the end. But as you see, this state management is not
          optimal.
        </h2>
      ) : null}

      {expand.arrowD ? (
        <h2>
          This is was all I wanted to show. But why is removing this so hard?
          How to make this better?
        </h2>
      ) : null}
    </div>
  );
}

首先，感謝您來到這里。 我是 React 的初學者，並且有一個關於如何使我的 state 管理更優化和更好工作的問題。

我試圖在一個 React 鈎子中渲染多個組件，以避免創建許多不同的鈎子。 但是我的解決方案不能正常工作，也不是很理想。 我缺乏如何讓 state 更有活力的知識，但我覺得我很接近。 以下是示例：代碼沙箱

如果您打開代碼沙箱，在第二次嘗試文件中，我嘗試設置[e.currentTarget.value]: [e.currentTarget.status]以嘗試從 IconButton 獲取狀態，我將其存儲為status={.expand.checkedA} 。 但這顯然不是 React state 管理的工作方式。

有人可以告訴我這里的最佳做法是什么嗎？ 如果您對有條件地渲染多個組件的替代方法有建議，我也會很好奇。

干杯。

Answer 1

我認為您做得很好，我只需更改一些內容即可使其正常工作：

首先讓handleChange執行此操作，而不是當前代碼：

const handleChange = (e) => {
  setExpand({
   ...expand,
   [e.currentTarget.name]: !expand[e.currentTarget.name]
  });
};

這樣，您只需更改您單擊的那個，rest 將保持不變。

其次，您的 jsx 中不需要三元運算符，您可以使用 && 運算符：

  {expand.arrowA && (
    <h2>
      This is the first start of the story, let's see if we can add the
      rest.
    </h2>
  )}

如果您有任何問題，請檢查分叉沙箱： https://codesandbox.io/s/cool-fog-h7vct?file=/src/App.js:2073-2226