时间戳

首页 > 解决方案 > 反应 - 编码错误

reactjs - 反应 - 编码错误

问题描述

我正在关注以下教程：https ://www.youtube.com/watch?v=OzqR10jG1pg 使用代码编辑器：https ://stackblitz.com

编码错误如下：

预期 index.js (36:10) '}' 中的错误。

错误行显示：

render: function () {

如何使此代码正常工作？

这是我的代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

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



    <div id="example"></div>

    <script type="text/babel">

        var Bacon = React.createClass({

            render: function () {
                return (<h3>This is a simple component!</h3>);
            }

        });

        ReactDOM.render(<Bacon />, document.getElementById('example'));

    </script>

标签： reactjs

解决方案

看起来您正在将 HTML 代码放入您的 javascript ( index.js) 文件中。你应该有一个单独的 HTML 文件。

我可以看到您正在尝试渲染两个不同的应用程序。

首先，当您使用时，ReactDOM.render(<Bacon />, document.getElementById('example'));您是在告诉 React 在具有 ID 属性“example”的 HTML 元素中呈现组件 Bacon。

然后，使用render(<App />, document.getElementById('root'));，React 将查找具有 ID 属性 'root' 的元素。

因此，您的 HTML 文件中应该包含这两个元素，如下面的代码片段。

// index.js
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <div>{this.state.name}</div>
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<!-- index.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="example"></div>
<div id="root"></div>

<script type="text/babel">
  var Bacon = React.createClass({
    render: function () {
      return (<h3>This is a simple component!</h3>);
    }
  });

  ReactDOM.render(<Bacon />, document.getElementById('example'));
</script>

推荐阅读