React 中基于 Material UI 中 IconButton 组件的 onClick 属性的条件渲染

如何解决React 中基于 Material UI 中 IconButton 组件的 onClick 属性的条件渲染

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 的初学者，有一个关于如何使我的状态管理更优化和更好工作的问题。

我试图在一个 React 钩子中渲染多个组件，以避免创建许多不同的钩子。但是我的解决方案不能正常工作，也不是很理想。我缺乏如何使状态更具活力的知识，但我觉得我很接近。下面是示例：Code Sandbox

如果您打开代码沙箱，在第二个尝试文件中，我尝试设置 [e.currentTarget.value]: [e.currentTarget.status] 以尝试从 IconButton 获取状态，我在那里将其存储为 status={!expand.checkedA} 。但这显然不是 React 状态管理的工作方式?。

有人可以启发我了解这里的最佳实践吗？如果您对有条件地呈现多个组件的替代方法有建议，我也会很好奇。

干杯。

解决方法

我认为你做得很好，我只需要改变一些东西来让它工作：

首先让 handleChange 代替当前代码执行此操作：

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

这样，您将只更改您点击的那个，其余的将保持不变。

其次，您的 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