Question

我是使用React构建应用的新手。下载“入门”后＃39;应用程序直接来自repo我启动了服务器并正确呈现了默认应用程序。我尝试按照教程here添加一个Menu组件，但是在编译后没有错误的应用程序无法呈现。有关更多上下文，此应用程序保存在名为App.js的文件中，而不是扩展名为.jsx的文件。

我认为问题在于通过{}将JS代码插入到MenuExample.render()内的HTML中。如果我使用函数中注释掉的简单HTML代码替换MenuExample.render()的正文，则应用呈现。有人可以解释为什么应用程序不呈现？感谢您的帮助。

请参阅下面的完整代码。

＆＃13;

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

/* eslint no-var:0*/
/* eslint func-names:0*/
/* eslint prefer-arrow-callback:0*/
/* eslint class-methods-use-this:0*/
class App extends Component {

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <MenuExample items={ ['Home', 'Services', 'About', 'Contact Us'] }/>
      </div>
    );
  }
}

class MenuExample extends Component {
  // eslint-disable-next-line
  getInitialState() {
    return { focused: 0 };
  }

  clicked(index) {
    this.setState({ focused: index });
  }

  // eslint-disable-next-line
  render() {
    var self = this;

    return (
      <div>
        <ul>{this.props.items.map(function (m, index) {
          var style = '';

          if (self.state.focused === index) {
            style = 'focused';
          }

          return <li className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;
        }) }
        </ul>

        <p> Selected: {this.props.items[this.state.focused]} </p>
      </div>

      // Simple HTML that works
      // <p> Foo </p>
    );
  }
}

export default App;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

＆＃13;

Answer 1

您尝试在使用getInitialState类创建的react组件中使用es6生命周期方法，这是不受支持的。您应该更改为构造函数并在其中设置初始状态。

class MenuExample extends Component {
  // eslint-disable-next-line
  constructor(props) {
    super(props);
    this.state = { focused: 0 };
  }
  ...

解释here。

在HTML中使用JS时，React App不呈现

1 个答案: