Question

我是React的新用户并尝试在React组件下创建，但它没有被渲染。

script.jsx

var Button = React.createClass({
      getInitialState: () => {
        return {
          counter: 0
        };
      },
      handleClick: () => {
        this.setState({
          counter: this.state.counter + 1
        });
      },
      render: () => {
        return (<button onClick={this.handleClick}> this.state.counter </button>);
        }
      });

    React.render(<Button />, document.getElementById('root'));

的index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>React App</h1>
    <div id="root"></div>

    <script src="libs/react-15.0.2.js"></script>
    <script src="script.jsx"></script>
  </body>
</html>

任何人都可以告诉我这里出了什么问题。

Answer 1

在代码运行之前，您需要做几件小事。

首先，您需要将JSX编译为普通的JS。浏览器不知道如何解释JSX，因此会抛出异常Uncaught SyntaxError: Unexpected token <...。要编译JSX，您可以使用名为Babel的工具。他们有一些如何在their blog上将JSX编译为JS的示例，或者您可以尝试使用其中一个教程。

我注意到的第二件事是你正在呼叫React.render(...)。对于几个版本的ReactJS，此方法已被弃用。您需要导入名为ReactDOM的其他库以在浏览器中呈现组件。

以下是编译后应该有效的代码示例。

'use strict';

var Button = React.createClass({
  displayName: 'Button',

  getInitialState: function getInitialState() {
    return {
      counter: 0
    };
  },
  handleClick: function handleClick() {
    this.setState({
      counter: this.state.counter + 1
    });
  },
  render: function render() {
    return React.createElement(
      'button',
      { onClick: this.handleClick },
      this.state.counter
    );
  }
});

ReactDOM.render(React.createElement(Button, null), document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<h1>React App</h1>
<div id="root"></div>

如果您需要更多信息，请在下面添加评论，我将更新此答案。

Answer 2

我怀疑你关注的例子有点过时了吗？代码中有几个问题。首先，您现在应该使用

import ReactDOM from "react-dom";

ReactDOM.render(<Button />, document.getElementById('root'));

然后，为了在浏览器中加载JSX代码，您需要通过Babel运行它。即使你这样做，这可能也行不通：

请注意，某些浏览器（例如Chrome）无法加载该文件，除非它通过HTTP提供。

（来自https://facebook.github.io/react/docs/getting-started.html）

因此，使用webpack或browserify之类的东西可能会好得多。

在你的渲染函数中，你应该用花括号括起对计数器的引用，因为它是JavaScript：

{ this.state.counter }

最后一点，如果您开始学习React，我建议您先使用纯JavaScript类，因为这似乎是React的方法：

import React, {Component} from "react";

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {counter: 0};
  }

  render() {
    return (
        <button
          onClick={ () => this.setState({counter: this.state.counter + 1}) }>
          {this.state.counter}
          </button>
    );
  }
}

无法渲染反应组件

2 个答案: