我遇到卡片，React，道具和Bootstrap的问题

Question

基本上，我过滤了一个复杂的json数组，它为我倒了这5种不同的道具

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

我想制作一张卡片，其中显示一些卡片。

这是我的代码：

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

// 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 {
  state = {
    gists: null
  };

  render() {
    return (
      <Router>
        <Card style={{ width: "18rem" }} key={this.props.noticia.id}>
          <Card.Img variant="top" src={this.props.noticia.imagen} />
          <Card.Body>
            <Card.Title>{this.props.noticia.titulo}</Card.Title>
            <Button onClick={this.Example.bind(this)}>

            </Button>
          </Card.Body>
        </Card>
      </Router>
    );
  }

}
// this.props.onDelete(this.props.char)
// const Gist = ({ match }) => (
//   <Card.Text>
//     <Example />
//   </Card.Text>
// );

export default MovieRow;

我要打印

{this.props.noticia.parrafo}

内部Bootstrap的折叠功能如下：

  state = {
    gists: null
  };

  render() {
    return (
      <Router>
        <Card style={{ width: "18rem" }} key={this.props.noticia.id}>
          <Card.Img variant="top" src={this.props.noticia.imagen} />
          <Card.Body>
            <Card.Title>{this.props.noticia.titulo}</Card.Title>
            <Button >
             <Exmple/>
            </Button>
          </Card.Body>
        </Card>
      </Router>

调用此功能

return ( <>
  <Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} >
    Mas Información
  </Button>
  <Collapse in={open}>
    <div id="example-collapse-text">{this.props.noticia.parrafo}</div> 
  </Collapse>
</> );

我的想法是按下按钮，然后显示该道具。

我正在使用卡片寻求想法。这是一个学校项目。