React-Bootstrap Collapse 不适用于自定义组件

Question

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

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

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

我是否误解了应该如何使用折叠？或者任何人都可以提出一个解决方案，让 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 that renders a DL</em>
    </p>
    <BasicList
      id="0"
      name="Wednesday Addams"
      address="0001 Cemetery Lane"
      color="black"
    />

    <p>
      <em>
        Ex 2: BasicList component that renders a DL inside a Collapse. It should
        be collapsed, but it is not.
      </em>
    </p>
    <Collapse in={false}>
      <BasicList
        id="1"
        name="Eddie Munster"
        address="1313 Mockingbird Lane"
        color="grey"
      />
    </Collapse>

    <p>
      <em>Ex 3: A simple DL element inside a Collapse. It is collapsed.</em>
    </p>
    <Collapse in={false}>
      <dl id="2" className="row">
        <dt className="col-md-3">Name</dt>
        <dd className="col-md-9">Theodore Cleaver</dd>

        <dt className="col-md-3">Address</dt>
        <dd className="col-md-9">485 Mapleton Drive</dd>

        <dt className="col-md-3">Favorite Color</dt>
        <dd className="col-md-9">Blue</dd>
      </dl>
    </Collapse>
  </Container>
);

export default App;

Answer 1

当Collapse 组件被折叠时，它会将.collapse 类添加到直接子元素中。它无法添加一个类，因为BasicList 是一个组件，因此我可以在您的代码中看到它。但是，您可以将 BasicList 组件包装在 div 中。

<Collapse in={false}>
    <div>
        <BasicList
            id="1"
            name="Eddie Munster"
            address="1313 Mockingbird Lane"
            color="grey"
        />
    </div>
</Collapse>

你可以看到working example。