React组件未在浏览器上显示

Question

简单来说，我的一个组件成功渲染，但另一个组件没有在浏览器上显示。 这是我的App.js

import React, { Component } from 'react';
import './App.css';

import Top from './Top'
import Bottom from './Bottom'
import Left from './Left'
import Right from './Right'
import Center from './Center'
import Extra from './Extra'


class App extends Component {
  render() {
    return (
      <div className="App">
      <Top />
      <Center />
      </div>
    );
  }
}


export default App;

在上面，<Top />组件在浏览器上呈现/查看，但qzxswpoi组件的JSX在inspect中显示但无法在浏览器中查看。 这是我的Center.js组件：

<Center />

这里我附上我的浏览器的截图。

import React, { Component } from 'react'

import lamp from './images/thumbs/masonry/lamp-400.jpg'


class Center extends React.Component {
  render () {
    return (
      <React.Fragment>

      <section class="s-content">

          <div class="row masonry-wrap">
              <div class="masonry">

                  <div class="grid-sizer"></div>

                  <article class="masonry__brick entry format-standard" data-aos="fade-up">

                      <div class="entry__thumb">
                          <a href="single-standard.html" class="entry__thumb-link">
                              <img src={lamp} alt=""/>
                          </a>
                      </div>

                      <div class="entry__text">
                          <div class="entry__header">

                              <div class="entry__date">
                                  <a href="single-standard.html">December 15, 2017</a>
                              </div>
                              <h1 class="entry__title"><a href="single-standard.html">Just a Standard Format Post.</a></h1>

                          </div>
                          <div class="entry__excerpt">
                              <p>
                                  Lorem ipsum Sed eiusmod esse aliqua sed incididunt aliqua incididunt mollit id et sit proident dolor nulla sed commodo est ad minim elit reprehenderit nisi officia aute incididunt velit sint in aliqua...
                              </p>
                          </div>
                          <div class="entry__meta">
                              <span class="entry__meta-links">
                                  <a href="category.html">Design</a>
                                  <a href="category.html">Photography</a>
                              </span>
                          </div>
                      </div>

                  </article>
</div>
          </div>

          <div class="row">
              <div class="col-full">
                  <nav class="pgn">
                      <ul>
                          <li><a class="pgn__prev" href="#0">Prev</a></li>
                          <li><a class="pgn__num" href="#0">1</a></li>
                          <li><span class="pgn__num current">2</span></li>
                          <li><a class="pgn__num" href="#0">3</a></li>
                          <li><a class="pgn__num" href="#0">4</a></li>
                          <li><a class="pgn__num" href="#0">5</a></li>
                          <li><span class="pgn__num dots">…</span></li>
                          <li><a class="pgn__num" href="#0">8</a></li>
                          <li><a class="pgn__next" href="#0">Next</a></li>
                      </ul>
                  </nav>
              </div>
          </div>

      </section>
      </React.Fragment>

    )
  }
}


export default Center

上部黑色部分是组件，下面是<Top />组件，在浏览器中不可见。

这可能是一个小错误，但我是新的反应，我无法找到可能的原因。帮助将不胜感激。

Answer 1

您应该将所有类属性更改为className

Answer 2

在react类中是保留的关键字，因此你不能像普通的html那样使用类。这里JSX用于react，className用于指定任何样式类。因此，您应该尝试在声明组件<Center />时将所有类转换为className