Javascript 如何在Ant Design中添加React引导折叠功能<；列表>；要素

我想在单击“编辑”按钮时将折叠效果添加到列表中，以便在列表元素下方显示一个主体，用于编辑对象的输入字段。我使用react引导程序进行折叠，使用ant-d进行列表

以下是我的清单：

<List
  dataSource={this.state.data}
  renderItem={item => (
    <List.Item key={item.id} actions = {
       [
        <Button type="primary"  onClick={() => this.setState({ open: !open })}
           aria-controls="example-fade-text"
           aria-expanded={open} >
             Edit
            </Button>,
            <Button type="primary">
              Add to cart
          </Button>
        ]
      }>
          <List.Item.Meta
           avatar={<Avatar src={icon} size={64} />}
           title={item.name}
           description={item.description}
       />
      <div>Content</div>
      <Collapse in={this.state.open}>
         <div id="example-collapse-text">
            here's some text
         </div>
      </Collapse>
    </List.Item>
  )}
>

---

以下是我所在州的内容：

  state = {
    data: [],
    loading: false,
    hasMore: true,
    open: false,
  }

我的渲染函数中有

const{open}=this.state.open

。 相关说明：我把整个东西都包在InfiniteScroll上，但这不应该影响它（我想）

---

当我没有使用折叠时，我的fetchData axios调用工作正常，因此我不知道为什么会导致此问题。

如何从组件中的react引导导入折叠？ 也许这可以解决你的问题

如果您想使用ant设计中的折叠。然后我根据您的要求制作了一个示例代码

---

如何从组件中的react引导导入折叠？ 也许这可以解决你的问题

如果您想使用ant设计中的折叠。然后我根据您的要求制作了一个示例代码

---

导出或导入此组件时可能会出错，请检查导出并要求（）我相当确定我的导出/导入是正确的，因为当我排除这些行时，它完全正常工作。这里有一些文本，您是否在项目中的其他位置使用了react bootstrap。。如何在该组件中导入折叠？……看起来他们没有直接使用折叠组件，而是在accordion下使用。。检查这些组件导出或导入此组件时可能会出错，请检查导出并要求（）我相当确定我的导出/导入是正确的，因为当我排除这些行时，它完全正常工作。这里有一些文本，您是否在项目中的其他位置使用了react bootstrap。。如何在该组件中导入折叠？……看起来他们没有直接使用折叠组件，而是在accordion下使用。。检查这些组件，好吧，结果是我导入错误了，我导入了{Collapse}，而不是导入Collapse。但是，当它运行时，“编辑”按钮不执行任何操作，折叠文本显示在内容旁边。我是否将折叠元素放置在正确的位置？我还检查了你的代码沙盒链接。代码的哪一部分使用antd中的折叠？或者我应该加上它。谢谢你，好吧，结果是我导入错误了，我导入了{Collapse}，而不是导入Collapse。但是，当它运行时，“编辑”按钮不执行任何操作，折叠文本显示在内容旁边。我是否将折叠元素放置在正确的位置？我还检查了你的代码沙盒链接。代码的哪一部分使用antd中的折叠？或者我应该加上它。非常感谢。

  state = {
    data: [],
    loading: false,
    hasMore: true,
    open: false,
  }