Javascript react-SyntaxError:Inline-Babel脚本：未终止的JSX内容_Javascript_Reactjs

Javascript react-SyntaxError:Inline-Babel脚本：未终止的JSX内容

javascript reactjs

Javascript react-SyntaxError:Inline-Babel脚本：未终止的JSX内容,javascript,reactjs,Javascript,Reactjs,我正在学习如何反应并尝试使用钩子。代码的作用是从Ajax获取数据，然后显示列表。但是我得到了一个错误： SyntaxError: Inline Babel script: Unterminated JSX contents (53:21) 51 | 52 | ReactDOM.render( > 53 | <MyList/>, | ^ 54 | document.getElementById('example') 55 | )

我正在学习如何反应并尝试使用钩子。代码的作用是从Ajax获取数据，然后显示列表。但是我得到了一个错误：

SyntaxError: Inline Babel script: Unterminated JSX contents (53:21)
51 | 
52 |   ReactDOM.render(
> 53 |     <MyList/>,
     |         ^
54 |     document.getElementById('example')
55 |   );
56 |      when I load the index.html in browser.

SyntaxError:inlinebabel脚本：未终止的JSX内容（53:21）
51 | 
52 | ReactDOM.render(
> 53 |     ,
|         ^
54 | document.getElementById（'示例'）
55 |   );
56 |当我在浏览器中加载index.html时。

以下是index.html中的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="jquery.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
  class MyList extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        loading: true,
        error: null,
        data: null
      };
    }

    componentDidMount() {
      const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
      $.getJSON(url)
       .done(
        (value) => this.setState({
          loading: false,
          data: value
        })
      ).fail(
        (jqXHR, textStatus) => this.setState({
          loading: false,
          error: jqXHR.status
        })
      );
    }

    render() {
      if (this.state.loading) {
        return <span>Loading...</span>;
      } else if (this.state.error !== null) {
        return <span>Error: {this.state.error}</span>;
      } else {
        var projects = this.state.data.items;
        var results=[];
        projects.forEach(p => {
          var item=<li>{p.name}<li>;
          results.push(item);
        });
        return (
          <div>
            <ul>the result list is {results}</ul>
          </div>
        );
      }
    }
  };

  ReactDOM.render(
    <MyList/>,
    document.getElementById('example')
  );
    </script>
  </body>
</html>


类MyList扩展了React.Component{
构造函数（…参数）{
超级（…args）；
此.state={
加载：对，
错误：null，
数据：空
};
}
componentDidMount（）{
常量url=https://api.github.com/search/repositories?q=javascript&sort=stars';
$.getJSON（url）
.完成(
（值）=>this.setState({
加载：false，
数据：价值
})
).失败(
（jqXHR，textStatus）=>this.setState({
加载：false，
错误：jqXHR.status
})
);
}
render（）{
if（this.state.loading）{
返回装载。。。；
}else if（this.state.error！==null）{
返回错误：{this.state.Error}；
}否则{
var projects=this.state.data.items；
var结果=[]；
projects.forEach（p=>{
var item={p.name}；
结果：推送（项目）；
});
返回(
结果列表为{results}
);
}
}
};
ReactDOM.render(
,
document.getElementById（'示例'）
);

如果Ajex调用get data，请将其保存到this.state.data，然后尝试遍历它以显示其所有元素。

有人能帮忙吗？

我把这个放在代码笔里，在第36行注意到你没有关闭你的

标签。我只需关闭

标记（如

）即可解决该语法错误。查看代码笔：

var item={p.name}；

试着换成

var item=<li>{p.name}</li>;

var item={p.name}；

ReactDOM.render（MyList（），document.getElementById（“示例”）不客气，嘿，事情发生了=）你能给我一个公认的答案吗？
var item=<li>{p.name}</li>;