Question

我是React的新手，正在尝试创建一个项目组合项目。在执行此操作时，即使我已经在该行中添加了分号，也出现了一个错误，我需要在第3行中添加一个分号。有人知道如何解决这个问题吗？

import React, { Component } from 'react';
export default class Footer extends Component {
  render: function(); {
  return (

  <footer>
    <div className="row">
      <div className="twelve columns">
        <ul className="social-links">
          <li><a href="#"><i className="fa fa-facebook" /></a></li>
          <li><a href="#"><i className="fa fa-twitter" /></a></li>
          <li><a href="#"><i className="fa fa-google-plus" /></a></li>
          <li><a href="#"><i className="fa fa-linkedin" /></a></li>
          <li><a href="#"><i className="fa fa-instagram" /></a></li>
          <li><a href="#"><i className="fa fa-dribbble" /></a></li>
          <li><a href="#"><i className="fa fa-skype" /></a></li>
        </ul>
        <ul className="copyright">
          <li>© Copyright 2014 CeeVee</li>
          <li>Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a></li>   
        </ul>
      </div>
      <div id="go-top"><a className="smoothscroll" title="Back to Top" href="#home"><i className="icon-up-open" /></a></div>
    </div>
  </footer> {/* Footer End*/}
);
}
};
  </React.Fragment>
);
}
}

Answer 1

我认为问题在这里，

render: function(); {   //This `;` is the issue which is end of line and syntax error

应该是

render: function() {

Answer 2

根据反应透视图，

render（）是组件的生命周期挂钩。并在浏览器上呈现内容。该组件的基本示例代码将类似于...

import React, { Component } from "react";

export default class Footer extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        console.log(this.props);
    }

    render() {
        return (
            <footer>
    <div className="row">
      <div className="twelve columns">
        <ul className="social-links">
          <li><a href="#"><i className="fa fa-facebook" /></a></li>
          <li><a href="#"><i className="fa fa-twitter" /></a></li>
          <li><a href="#"><i className="fa fa-google-plus" /></a></li>
          <li><a href="#"><i className="fa fa-linkedin" /></a></li>
          <li><a href="#"><i className="fa fa-instagram" /></a></li>
          <li><a href="#"><i className="fa fa-dribbble" /></a></li>
          <li><a href="#"><i className="fa fa-skype" /></a></li>
        </ul>
        <ul className="copyright">
          <li>© Copyright 2014 CeeVee</li>
          <li>Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a></li>   
        </ul>
      </div>
      <div id="go-top"><a className="smoothscroll" title="Back to Top" href="#home"><i className="icon-up-open" /></a></div>
    </div>
  </footer>
        );
    }
}

这将正确运行。

解析错误：意外的令牌，预期为“;”即使已经有一个分号

2 个答案: