首页 > 解决方案 > 这个反应网络应用程序页脚中的错误在哪里?

问题描述

当我尝试在本地编译我的应用程序时,它不会运行。这一定是一个非常简单的错误,但我似乎无法找到它。我也不是经验丰富的程序员,所以答案似乎很明显。感谢您的任何帮助!

这是代码:

import React from 'react';

import { Link } from 'react-router-dom';

import twitterIcon from './twitterIcon.svg';
import facebookIcon from './facebookIcon.svg';
import './Footer.css';

const Footer = () => (
  <div className="Footer-wrapper">
    <div className="Footer-text-links-wrapper">
      <Link to="/about">
        <span className="Footer-text-link">About</span>
      </Link>
      <Link to="/faq">
        <span className="Footer-text-link">FAQ</span>
      </Link>
      <Link to="/contact">
        <span className="Footer-text-link">Contact</span>
      </Link>
      <a href="xxx"><span className="Footer-text-link">Community</span></a>
    </div>
    // <div className="Footer-icon-links-wrapper">
    //   <a
    //     href="https://www.twitter.com"
    //     target="_blank"
    //     rel="noopener noreferrer"
    //   >
    //     <img src={twitterIcon} className="Footer-icon-link" alt="twitter" />
    //   </a>
    //   <a
    //     href="https://www.twitter.com"
    //     target="_blank"
    //     rel="noopener noreferrer"
    //   >
    //     <img src={facebookIcon} className="Footer-icon-link" alt="facebook" />
    //   </a>
    //
    // </div>
  </div>
);

export default Footer;

这是每个终端的错误:

Failed to compile.

./src/components/Footer/Footer.js
Syntax error: Unexpected token (40:2)

  38 |     //
  39 |     // </div>
> 40 |   </div>
     |   ^
  41 | );
  42 |
  43 | export default Footer;

标签: reactjs

解决方案


注释不能像//JSX 中的 Javascript 那样。要编写评论,您可以执行类似 `{/* ...comment */} 的操作。所以在你的代码中它看起来像

    </div>
{/* <div className="Footer-icon-links-wrapper">
        ...
   </div> */}
  </div>

推荐阅读