小编Pat*_*k B的帖子

我遇到过 Collapse 在用于包装类组件时似乎无法正常工作的情况，尽管它在包装简单的 JSX 元素时似乎可以正常工作。

您可以在此示例中看到这一点：https : //codesandbox.io/embed/flamboyant-dhawan-4rf4b?fontsize=14&hidenavigation=1&theme=dark

请注意，在使用 Collapse 的两种情况下，它都使用 初始化in={false}，但是这在包装定义列表时有效，但在包装提供定义列表的自定义组件时不起作用。

我误解了应该如何使用 Collapse 吗？或者任何人都可以提出一个解决方案来让 Collapse 在包装类组件时按预期工作？

为方便起见，这是上面链接的相同代码：

import React from "react";

import Collapse from "react-bootstrap/Collapse";
import Container from "react-bootstrap/Container";

import "./App.css";

class BasicList extends React.Component {
  render() {
    return (
      <dl id={this.props.id} className="row">
        <dt className="col-md-3">Name</dt>
        <dd className="col-md-9">{this.props.name}</dd>

        <dt className="col-md-3">Address</dt>
        <dd className="col-md-9">{this.props.address}</dd>

        <dt className="col-md-3">Favorite Color</dt>
        <dd className="col-md-9">{this.props.color}</dd>
      </dl>
    );
  }
}

const App = () => (
  <Container className="p-3">
    <h1 className="header">Collapse Example</h1>

    <p>
      <em>Ex 1: BasicList component …