react SyntaxError：內聯Babel腳本：Unterminated JSX內容

我正在學習反應並嘗試使用hook。代碼所做的是從Ajax獲取數據，然後顯示列表。不過，我得到了錯誤：react SyntaxError：內聯Babel腳本：Unterminated JSX內容

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.

下面是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>

AJEX如果調用獲取數據，將其保存到this.state.data，然後試圖通過迭代它它顯示其所有元素。任何人都可以幫忙嗎？

來源

2017-04-04 Billy Chen

我把這個放在codepen中，注意到第36行你沒有關閉<li>標籤。我通過關閉<li>這樣的標籤來解決語法錯誤，例如</li>。退房codepen：http://codepen.io/justdan/pen/RpOWBz?editors=1010

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

嘗試更改爲

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

來源

2017-04-04 20:55:16

你是對的。太馬虎。謝謝！ –

不客氣，嘿，事情發生=）任何機會，你可以給我一個接受的答案標記？ –

當然。公認。 –

做ReactDOM.render(MyList(),document.getElementById('example'));

來源

2017-04-04 20:55:56

react SyntaxError：內聯Babel腳本：Unterminated JSX內容

回答

相關問題