使用 reactstrap 切换手风琴功能？

Question

使用 reactstrap 文档，我创建了一个带有可折叠卡片的 pseudo-accordion。我希望能够切换卡片，这样当我点击 list 2 的卡片 header 时，它会打开，如果我点击它，它会再次关闭连续地。如果我单击 list 1，list 2 应该关闭，list 1 应该打开，如预期的那样。

手风琴组件:

import React, { Fragment, useState } from 'react';
import { Collapse, CardBody, Card, CardHeader } from 'reactstrap';

const Lists = () => {
    const [isOpen, setIsOpen] = useState('');
    const [lists, setLists] = useState([
        {
            _id: 'id_abc',
            item_names: ['item 1', 'item 2', 'item 3'],
            list_name: 'List 2',
            author_name: 'Samantha Samson',
        },
        {
            _id: 'id_xyz',
            item_names: ['item 1', 'item 1', 'item 2', 'item 16'],
            list_name: 'List 1',
            author_name: 'John Johnson',
        },
    ]);

return (
    <Fragment>
        {lists.map((list) => (
            <Card key={list._id}>
                <CardHeader onClick={() => setIsOpen(list._id)}>
                    <h4>{list.list_name}</h4>
                </CardHeader>
                <Collapse isOpen={isOpen === list._id ? true : false}>
                    <CardBody>
                        <ul>
                            {list.item_names.map((item) => (
                                <li>{item}</li>
                            ))}
                        </ul>
                    </CardBody>
                </Collapse>
            </Card>
        ))}
    </Fragment>

);

我尝试向 onClick 添加一个函数，如下所示：

const handleToggle = (id) => {
    if(isOpen === id) {
        setIsOpen('');
    } else {
        setIsOpen(id);
    }
}

并给出了 header:

onClick={handleToggle(list._id)}

但这给了很多 rerenders/infinite 循环错误。

我也尝试了该函数的细微变化，结果相同。

Answer 1

你已经用这个修复了它：

  const handleToggle = (id) => {
    if (isOpen === id) {
      setIsOpen("");
    } else {
      setIsOpen(id);
    }
  };

太棒了！你犯错的地方是这样称呼它：

onClick={handleToggle(list._id)}

这将在每次渲染时调用该函数，并且由于它会更新状态变量，您将获得无限次渲染。

应该是：

onClick={() => handleToggle(list._id)}

沙盒：https://codesandbox.io/s/hungry-jepsen-1ip0x?file=/src/App.js

仅供参考： 您可以将三元运算符简化为：

isOpen={isOpen === list._id}

使用 reactstrap 切换手风琴功能？

Toggle Accordion functionality with reactstrap?

accordion

infinite-loop

reactjs

reactstrap