Javascript React中的条件渲染基于材质UI中IconButton组件的onClick属性 导入“/styles.css”； 从“React”导入React，{useState}； 从“@material ui/core”导入{IconButton}”； 从“@material ui/icons/ExpandMore”导入ExpandMoreIcon； 导出默认函数App（）{ const[expand，setExpand]=useState({ 阿罗瓦：错， B:错， C:错， 阿罗德：错 }); 常数handleChange=（e）=>{ 集扩展({ 扩大 [e.currentTarget.name]：！expand.arrowA， [e.currentTarget.name]：！expand.arrowB， [e.currentTarget.name]：！expand.arrowC， [e.currentTarget.name]：！expand.arrowD }); }; 返回( 反应条件渲染 如果用户单击箭头，则应渲染下面的组件，并且 如果用户再次单击箭头，则将删除此选项。 此箭头应显示文本的第一部分。{“”} {} 如果单击，此箭头将显示文本的第二部分，并且可能 删除。 {} 此箭头应显示下面文本的第三部分。{“”} {} 这真的是最后一部分了 {} {expand.arrova( 这是故事的第一个开始，让我们看看是否可以添加 休息 )：null} {expand.arrowB( 这是中间部分，很快就开始破裂。 )：null} {expand.arrowC( 我们已经接近尾声了，但正如你们所看到的，这种状态管理并没有结束 最优的 )：null} {expand.arrowD( 这就是我想要展示的一切。但为什么移除它如此困难呢？ 如何让它变得更好？ )：null} ); }

首先，谢谢你来到这里！我是React的初学者，对于如何使我的状态管理更优化和更好地工作，我有一个问题

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

---

如果您打开代码沙盒，在第二个尝试文件中，我试图设置[e.currentTarget.value]：[e.currentTarget.status]以尝试从图标按钮获取状态，我将图标按钮存储为状态={！expand.checkedA}。但React状态管理显然不是这样工作的我认为你做得很好，我只想改变一些事情使其工作：

首先进行手柄更改执行此操作，而不是当前代码：

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>
  );
}

这样，您将只更改您正在单击的一个，其余的将保持不变

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

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

{expand.arrowA&&(
这是故事的第一个开始，让我们看看是否可以添加
休息
)}

如果您有问题，请检查分叉沙箱：

---

谢谢，你说得对！我很感激你花时间检查沙箱牛仔裤。

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