React- Bootstrap Свернуть не работает с пользовательскими компонентами - PullRequest
Новая
       3

React- Bootstrap Свернуть не работает с пользовательскими компонентами

0 голосов
/ 03 марта 2020

Я столкнулся с ситуацией, когда 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;

1 Ответ

3 голосов
/ 04 марта 2020

Когда компонент Collapse свернут, он добавляет класс .collapse к непосредственному дочернему элементу. Он не может добавить класс, как я вижу в вашем коде, поскольку BasicList является компонентом. Однако вы можете обернуть BasicList компонент в div. 

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

. Вы можете увидеть рабочий пример .

...