Question

我是Reactjs的新手，正在尝试开发静态网站。到目前为止，已经能够渲染carasouel和纸牌等少数组件。

但是，在最近的开发中，特定的<div>被渲染两次。在进行故障排除时，我发现<div>出现了两次，但是在代码中，<div>只写了一次。挠我的头怎么解决这个问题。

这是代码： App.js

import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";

class App extends Component {
  render() {
    return (
      <Router>
        <Carasel />
        <Cards />
      </Router>
    );
  }
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

card.js

import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";

import { Button } from "react-bootstrap";
import "./card-style.css";

class Card extends Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <div className="card text-center">
        <div className="overflow">
          <img src={img1} alt="image1" />
        </div>
        <div className="card-body text-dark" />
        <h4 className="card-title">{mouse}</h4>
        <p className="card-text text-secondary">lorem20</p>
        <a href="#" className="btn btn-outline-success">
          Go Anywhere
        </a>
      </div>
    );
  }
}

export default Card;

cards.js

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";

class Cards extends Component {
  render() {
    return (
      <div className="container-fluid d-flex justify-content-center">
        <div className="row">
          <div className="col-md-4">
            <Card mouse="DevOps" />
          </div>
          <div className="col-md-4">
            <Card mouse="Cloud Computing" />
          </div>
          <div className="col-md-4">
            <Card mouse="Machine Learning" />
            <Card />
          </div>
        </div>
      </div>
    );
  }
}
export default Cards;

现在的问题是：<div className="card text-center">在结尾处被渲染两次。没有到哪里去，哪个是问题。在进行故障排除时，该组件似乎是有状态的？请建议

Answer 1

似乎您的卡片中有没有鼠标的附加卡片？在div的末尾？我不认为应该在那里。

React组件被渲染两次

1 个答案: