Question

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

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

请注意，在使用折叠的两种情况下，均使用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 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。

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

1 个答案: