如何将 React-Bootstrap 折叠功能添加到 Ant-Design <List> 元素

Question

我想在单击编辑按钮时向我的列表添加折叠效果，以便在我的列表元素下方显示一个正文，以便输入字段以编辑对象。我将 react-bootstrap 用于 Collapse 并将 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>
  )}
>

这是我收到的错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Context.Consumer的render方法（这个文件不是我做的，很可能是react自动生成的）。

  29 |   axios.get(DataUrl).then(
  30 |     res => {
  31 |       const apiData = res.data;
> 32 |       this.setState({data: apiData})
     | ^  33 |     }
  34 |   )
  35 | }

---

这些是我的状态的内容：

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

我的渲染函数中有const { open } = this.state.open。 相关说明：我把整个东西都包裹在 InfiniteScroll 上，但这不应该影响它，（我认为）。

当我没有使用 Collapse 时，我的 fetchData axios 调用工作得非常好，所以我不知道为什么会导致这个问题。

Answer 1

您如何从组件中的 react-bootstrap 导入崩溃？ 也许这可以解决您的问题。

如果您想使用来自 ant design 的 Collapse。然后我根据您的要求制作了一个示例代码。

https://codesandbox.io/s/mo4w7q85n8