为什么我的浏览器在运行 react 时显示空白页？答案

【问题标题】：Why my browser shows blank page when I run react?为什么我的浏览器在运行 react 时显示空白页？
【发布时间】：2017-04-08 00:19:12
【问题描述】：

我有一堆 html 代码，我正在破坏它们以响应组件。我是 react.js 的新手。我在页脚部分做了一些更改，但是当我在浏览器中运行 localhost 时，它什么也不显示。有人可以帮我解决这个问题吗？

提前致谢。

class Footer extends Component {

  render () {
    return (
      <div>
        <div className="footer">
         <div className="container">
           <div className="col-md-5 f-first-part">
             <div className="row">
               <div className="col-sm-5 f-add-part">

                 <div className="contact-info">
                                <p className="address">123</p>
                                <p className="email"><a href=""></a></p>
                                <p className="tele"><a href=""> 03580368</a></p>
                 </div>

                  <div className="large-3 large-offset-2 columns">
                    <ul className="menu vertical">
                      <li><a href="#">One</a></li>
                      <li><a href="#">Two</a></li>
                      <li><a href="#">Three</a></li>
                      <li><a href="#">Four</a></li>
                    </ul>
                  </div>

                  <div className="large-3 columns">
                    <ul className="menu vertical">
                      <li><a href="#">One</a></li>
                      <li><a href="#">Two</a></li>
                      <li><a href="#">Three</a></li>
                      <li><a href="#">Four</a></li>
                    </ul>
                  </div>

                 </div>
                </div>
            </div>
          </div>
      </div>
    )
  }

export default Footer;

【问题讨论】：

您的设置是什么样的？你能显示一些代码吗？
我已添加页脚
组件在渲染之前不会显示是否添加了 ReactDOM.render(
, document.getElementById('main-page')) ？还要确保你正确缩进代码，你的类页脚在代码之外

标签： html reactjs sass

【解决方案1】：

根据我从您的问题中读到的内容， 这是你的代码

Footer.js

import Footer from '/your-path-to-/footer.js'
import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class Footer extends Component {
 render () {
  return (
  <div>
    <div className="footer">
     <div className="container">
       <div className="col-md-5 f-first-part">
         <div className="row">
           <div className="col-sm-5 f-add-part">

             <div className="contact-info">
                            <p className="address">123</p>
                            <p className="email"><a href=""></a></p>
                            <p className="tele"><a href=""> 03580368</a></p>
             </div>

              <div className="large-3 large-offset-2 columns">
                <ul className="menu vertical">
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                  <li><a href="#">Four</a></li>
                </ul>
              </div>

              <div className="large-3 columns">
                <ul className="menu vertical">
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                  <li><a href="#">Four</a></li>
                </ul>
              </div>

             </div>
            </div>
        </div>
      </div>
  </div>
    )
  }
}
ReactDOM.render(<Footer/>, document.getElementById('main'));

你需要为组件定义一个容器来渲染它，在这种情况下，我创建了一个 index.html 文件，其中包含一个 id 为 main 的 div 元素，

您的 index.html

<div id="main"></div>

这将在那里加载组件，我不知道这是否是您需要的，您需要提供更多详细信息。

还要检查您的控制台，那里会显示重要信息

问候

【讨论】：