我需要帮助才能在反应类中自动显示方法

Question

所以我在为我的整个 react-app 开发卡片时遇到了麻烦，而且它是一个巨大的：

我有这 5 个道具，它们都包含来自多维 Json 数组的字符串：

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

我使用引导卡在 Virtual Dom 上打印信息。 交易是我使用一个按钮和一个折叠来在单击时显示道具 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>
    );
  }
}