为什么我的浏览器在运行反应时显示空白页？

我有一堆html代码，我打破它们来反应组件。我是react.js的新手。我在页脚部分做了一些改动，但是当我在浏览器中运行本地主机时，它什么也没有显示。有人可以帮我弄这个吗？为什么我的浏览器在运行反应时显示空白页？

在此先感谢。

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;

来源

2016-11-23 mukhilsaravanan

那么你的设置是什么样子？你能告诉我一些代码吗？ –

我已添加页脚 – mukhilsaravanan

组件在您渲染之前不会显示您是否添加了 ReactDOM.render（

从我从你的问题看， 这是你的代码

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>

这将加载该组件在那里，我不知道这是你需要什么，你需要提供更多的细节。

同时检查您的控制台，显示重要信息

问候

来源

2016-11-23 20:59:46

为什么我的浏览器在运行反应时显示空白页？

回答

相关问题