Reactjs 从通过 map 函数呈现的列表中仅扩展 1 个列表项答案

【问题标题】：Reactjs expand only 1 list item from lists rendered via map functionReactjs 从通过 map 函数呈现的列表中仅扩展 1 个列表项
【发布时间】：2021-08-30 09:02:33
【问题描述】：

我在 React 项目中有一个列表项，它由映射函数呈现到 UI

下面是代码

父组件

export default function PackageDetails({ newArray, packages }) {
  const [show, setShow] = useState(false)
  const setOpenFunction = () => {
    setShow(!show)
  }
  return (
    <Row>    
      <NonRecommendedPackage
        setOpen={setOpenFunction}
        show={show}
        packages={packages}
      />
    </Row>
  )
}

子组件

export default function RecommendedPackage({ setOpen, show ,packages}) {
  return (
    packages.map((item, index) => {
      return (
        <React.Fragment key={index}>
          <div className="not-recommended-packages" id={index}>
            <div className="main-results-row">

              <div className="package-item package-price">{item.price} € /ano</div>



              <button className="plus-icon-button">
                <span className="plus-text">+</span>
              </button>
            </div>
            {show && <div className="main-info">THIS DIV GETS DISPLAYED WHEN USER CLICKS ON ANY LIST ITEM</div>}
          </div>

          
        </React.Fragment>
      )
    })
  )
}

所以就像我的列表有 10 个项目，如果我选择位置 2 的项目，我只希望该 div 展开并显示我的“main-info” div，它由上述代码中的条件呈现

{show && <div className="main-info">THIS DIV GETS DISPLAYED WHEN USER CLICKS ON ANY LIST ITEM</div>}

【问题讨论】：

也许您的每个列表项都可以有自己的展开/折叠状态，然后您可以使用 click 事件处理程序进行切换。

标签： javascript reactjs

【解决方案1】：

将const [show, setShow] = useState(false) 移动到子组件类RecommendPackage。这样每个孩子都会有自己的状态，无论是展示还是现在。

export default function PackageDetails({ newArray, packages }) {
  return (
    <Row>    
     {packages.map((item, index) => 
      <RecommendedPackage
        key={index}
        item={item}
      />
      )}
    </Row>
  )
}

现在在你的子组件中做

export default function RecommendedPackage({ item}) {
      const [show, setShow] = useState(false);

      return (
          <div className="not-recommended-packages" onClick={() => setShow(!show)}>
            <div className="main-results-row">

              <div className="package-item package-price">{item.price} € /ano</div>



              <button className="plus-icon-button">
                <span className="plus-text">+</span>
              </button>
            </div>
            {show && <div className="main-info">THIS DIV GETS DISPLAYED WHEN USER CLICKS ON ANY LIST ITEM</div>}
          </div>
     )
}

【讨论】：