Question

当我单击编辑按钮时，我想在列表中添加折叠效果，以便在列表元素下方出现一个正文，用于输入字段以编辑对象。我正在使用react-bootstrap来折叠和使用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的渲染方法（我没有制作此文件，很可能是由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设计中的Collapse。然后，我根据您的要求制作了示例代码。

https://codesandbox.io/s/mo4w7q85n8

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

这是我收到的错误：

1 个答案: