Мне нужна помощь для автоматического отображения метода в классе реагирования

Question

Итак, у меня проблемы с разработкой карты для всего моего приложения Reaction, и она огромна:

У меня есть эти 5 реквизитов, все они содержат строки из многомерного массива Json:

{this.props.noticia.titulo}
{this.props.noticia.imagen}
{this.props.noticia.categoria}
{this.props.noticia.parrafo}

и я использую загрузочные карты для печати информации о Виртуальном Доме. дело в том, что я использую кнопку и коллапс, чтобы показать пропеллер при нажатии:

{this.props.noticia.parrafo}

, а затем вся страница загружается, показывая весь текст, вместо того, чтобы скрывать его, а затем при нажатии (двойной щелчок) текст скрывается.

Вот мой код:

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Card from "react-bootstrap/Card";
import { Button, Collapse } from "react-bootstrap";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";

// class MovieRow extends React.Component{

//     render(){
//         return <table key={gists.noticia.id}>
//         <tbody>
//           <tr>
//             <td>
//               <img alt="poster" width="120" src= {gists.noticia.imagen}/>
//             </td>
//             <td>
//               <h3 id="titulos">{gists.noticia.titulos}</h3>
//               <p>{gists.noticia.parrafo}</p>
//             </td>
//           </tr>
//         </tbody>
//       </table>
//     }
// }

class MovieRow extends React.Component {
  constructor(sufrimiento) {
    super(sufrimiento);
    this.state = {
      gists: null,
      news: this.props
    };
    this.dolor = this.dolor.bind(this);
  }

  dolor() {
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
  }
  render() {
    const gists = this.props;

    return (
      <Router>
        <Card style={{ width: "18rem" }} key={gists.noticia.id}>
          <Card.Img variant="top" src={gists.noticia.imagen} />
          <Card.Body>
            <Card.Title>{gists.noticia.titulo}</Card.Title>
            <Button
              variant="outline-dark"
              className="collapsible"
              onClick={this.dolor}
            >
              Mas información
            </Button>
            <div className="content">
              <p>{gists.noticia.parrafo}</p>
            </div>
          </Card.Body>
        </Card>
      </Router>
    );
  }
}

export default MovieRow;

Answer 1

Попробуйте что-нибудь подобное. state изначально имеет showParrafo в false. dolor() переключает его. render заботится о логике представления.

class MovieRow extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showParrafo: false,
      gists: null,
      news: this.props // <-- why are you doing this?
    };
  }

  dolor() {
    this.setState({
      showParrafo: !this.state.showParrafo
    });
  }

  render() {
    const { showParrafo } = this.state;

    return (
      <div>
        <Button
          variant={"outline-dark"}
          className={"collapsible"}
          onClick={this.dolor.bind(this)}
        >
          Mas información
        </Button>

        <div className={"content"}>
          {showParrafo && <p>{this.props.noticia.parrafo}</p>}
        </div>
      </div>
    );
  }
}