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 />组件正在浏览器中呈现/查看，但是<Center />组件的JSX显示在inspect中，但无法在浏览器中查看。
这是我的Center.js组件：

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 />组件，下面是<Center />组件，在浏览器中不可见。

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

Answer 1

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

Answer 2

react class中的关键字是保留的关键字，因此您不能像在普通html中那样使用class。这里JSX用于react，className用于指定任何样式类。因此，您应该尝试将所有类都转换为组件class Center extends React.Component的声明中期望的className

React组件未显示在浏览器上

2 个答案: