Question

我正在学习以下课程的教程：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>

Answer 1

您似乎正在将HTML代码放入javascript（index.js）文件中。为此，您应该有一个单独的HTML文件。

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

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

然后，使用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>

反应-编码错误

1 个答案: