Javascript 我需要帮助在react类中自动显示方法

因此，我在为我的整个react应用程序开发卡片时遇到了麻烦，这是一个巨大的问题：

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

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

我使用引导卡在虚拟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;

从“React”导入React；
导入“bootstrap/dist/css/bootstrap.css”；
从“反应引导/卡”导入卡；
从“react bootstrap”导入{按钮，折叠}；
从“react Router dom”导入{BrowserRouter as Router，Link，Route}；
//类MovieRow扩展了React.Component{
//render（）{
//返回
//         
//           
//             
//               
//             
//             
//{gists.noticia.titulos}
//{gists.noticia.parrafo}

//             
//           
//         
//       
//     }
// }
类MovieRow扩展了React.Component{
建造师（sufrimiento）{
super（sufrimiento）；
此.state={
gists:null，
新闻：这是道具
};
this.dolor=this.dolor.bind（this）；
}
多洛（）{
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i
);
}
}
导出默认MovieRow；

试试这样的方法<代码>状态最初将

showParrafo

设置为false

dolor（）

将其切换<代码>渲染处理视图逻辑

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>
    );
  }
}

class MovieRow扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
肖帕拉福：错，
gists:null，
新闻：this.props//不要使用css来操纵隐藏和显示。相反，只要让
渲染
为您处理视图逻辑。
onClick
函数当然不应该操纵视图；它应该只操纵本地
状态
。我会给您一些关于这段代码的上下文。这是一堆教程，还有也许我忘了删除一些东西。