無法渲染反應組件

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的工具。 他們在他們的博客上提供了一些有關如何將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運行它。 即使您這樣做，也可能行不通：

請注意，除非通過HTTP提供文件，否則某些瀏覽器（例如Chrome）將無法加載該文件。

（來自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 個解決方案

解決方案1
2 已采納 2016-05-16 11:31:14

解決方案2
2 2016-05-16 11:36:32

無法渲染反應組件

問題描述

2 個解決方案

解決方案1 2 已采納 2016-05-16 11:31:14

解決方案2 2 2016-05-16 11:36:32

解決方案1
2 已采納 2016-05-16 11:31:14

解決方案2
2 2016-05-16 11:36:32