反应中的条件渲染答案

【问题标题】：Conditional Rendering in react反应中的条件渲染
【发布时间】：2022-12-10 19:10:18
【问题描述】：

我需要在反应中有条件地显示和隐藏元素。我知道我们可以通过为每个元素创建布尔值来有条件地渲染，并且通过操纵特定的布尔状态变量我们可以有条件地显示和隐藏元素。是否有任何方法可以通过不为 useState 中的每个元素设置布尔变量来有条件地显示和隐藏元素？

这是代码。有什么方法可以通过不在状态中创建变量来有条件地显示和隐藏

  const [state, setState] = React.useState({
    ele0: true,
    ele1: true,
    ele2: true,
  });
  let arr = [1, 2, 3];

  const handleOnChange = (index) => {
    setState({ ...state, [`ele${index}`]: !state[`ele${index}`] });
  };
  return (
    <div className="App">
      {arr.map((ele, idx) => (
        <div key={idx}>
      {state[`ele${idx}`] &&    <h1>{`element${idx}`}</h1> }
          <button
            onClick={() => handleOnChange(idx)}
          >{`element ${idx} button`}</button>
        </div>
      ))}
    </div>
    )

【问题讨论】：

你是说没有这个const [state, setState] ？

标签： javascript reactjs react-hooks state render

【解决方案1】：

您可以创建另一个名为 MyElement 的组件来保留文本及其文本切换按钮。这样就不需要在一个地方处理每个元素的多个状态。 MyElement 负责自己的状态。

试试这样：

const MyElement = ({ idx }) => {
  const [state, setState] = React.useState(true);

  return (
    <div key={idx}>
      {state && <h1>{`element${idx}`}</h1>}
      <button
        onClick={() => setState((prev) => !prev)}
      >{`element ${idx} button`}</button>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {Array.from({ length: 3 }).map((ele, idx) => (
        <MyElement idx={idx} key={idx}/>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

【讨论】：

@skay，检查一下！