Question

使用sublime text 3时，我遇到了React的问题。我为jsx，babel等安装了正确的软件包：出于某种原因，当我尝试运行一个简单的组件时，我在控制台中遇到了大量错误。请记住，我是新手做出反应。请帮忙：请参阅以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Template</title>
<script src="../../js/react.min.js"></script>
<script src="../../js/react-dom.min.js"></script>
<script src="../../js/browser.min.js"></script>
</head>

<body>

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

<script type="text/babel">

    var bacon = React.createClass({

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

});

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

</body>
</html>

这是我在控制台收到的错误

browser.min.js:41 Uncaught SyntaxError: embedded: Unexpected token (7:6)
   5 |         render: function(){
   6 |             return(<h3>This is a simple component</h3>);
>  7 |      }<!--end of component-->
     |       ^
   8 | 
   9 |     });
  10 | 
    at Parser.pp.raise (browser.min.js:41)
    at Parser.pp.unexpected (browser.min.js:42)
    at Parser.readToken_lt_gt (browser.min.js:43)
    at Parser.getTokenFromCode (browser.min.js:43)
    at Parser.readToken (browser.min.js:43)
    at Parser.<anonymous> (browser.min.js:43)
    at Parser.readToken (browser.min.js:42)
    at Parser.nextToken (browser.min.js:43)
    at Parser.next (browser.min.js:43)
    at Parser.eat (browser.min.js:43)
pp.raise @ browser.min.js:41
pp.unexpected @ browser.min.js:42
readToken_lt_gt @ browser.min.js:43
getTokenFromCode @ browser.min.js:43
readToken @ browser.min.js:43
(anonymous) @ browser.min.js:43
(anonymous) @ browser.min.js:42
nextToken @ browser.min.js:43
next @ browser.min.js:43
eat @ browser.min.js:43
pp.parseBlock @ browser.min.js:41
pp.parseFunctionBody @ browser.min.js:41
(anonymous) @ browser.min.js:42
pp.parseFunction @ browser.min.js:41
pp.parseExprAtom @ browser.min.js:40
(anonymous) @ browser.min.js:43
pp.parseExprSubscripts @ browser.min.js:40
pp.parseMaybeUnary @ browser.min.js:40
pp.parseExprOps @ browser.min.js:40
pp.parseMaybeConditional @ browser.min.js:40
pp.parseMaybeAssign @ browser.min.js:40
pp.parseObjPropValue @ browser.min.js:40
(anonymous) @ browser.min.js:42
pp.parseObj @ browser.min.js:40
pp.parseExprAtom @ browser.min.js:40
(anonymous) @ browser.min.js:43
pp.parseExprSubscripts @ browser.min.js:40
pp.parseMaybeUnary @ browser.min.js:40
pp.parseExprOps @ browser.min.js:40
pp.parseMaybeConditional @ browser.min.js:40
pp.parseMaybeAssign @ browser.min.js:40
pp.parseExprListItem @ browser.min.js:41
(anonymous) @ browser.min.js:42
pp.parseExprList @ browser.min.js:41
pp.parseSubscripts @ browser.min.js:40
pp.parseExprSubscripts @ browser.min.js:40
pp.parseMaybeUnary @ browser.min.js:40
pp.parseExprOps @ browser.min.js:40
pp.parseMaybeConditional @ browser.min.js:40
pp.parseMaybeAssign @ browser.min.js:40
pp.parseVar @ browser.min.js:41
pp.parseVarStatement @ browser.min.js:41
pp.parseStatement @ browser.min.js:41
(anonymous) @ browser.min.js:42
pp.parseTopLevel @ browser.min.js:41
parse @ browser.min.js:41
parse @ browser.min.js:40
exports.default @ browser.min.js:7
parse @ browser.min.js:7
parseCode @ browser.min.js:7
(anonymous) @ browser.min.js:10
wrap @ browser.min.js:7
transform @ browser.min.js:10
transform.run @ browser.min.js:4
exec @ browser.min.js:4
runScripts @ browser.min.js:4

有什么想法吗？

Answer 1

删除HTML评论（）。由于您正在编写JS代码，请使用JS注释/* ... */或//

控制台错误也非常明确，及时你会习惯它！

Answer 2

您的评论/*end of component*/不在JSX内部且在常规JavaScript中。您需要使用JS注释语法，例如//end of component或var bacon = React.createClass({ render: function(){ return(<h3>This is a simple component</h3>); } /*comment outside the JSX*/ });。例如：

var bacon = React.createClass({
  render: function(){
    return(<h3>
      This is a simple component
      {/*comment inside the JSX*/}
    </h3>);
  }
});

请注意，如果它是在JSX中编写的，那么它仍然会给你带来问题。在这种情况下，您仍然会使用JS注释语法并将其包装在括号中，如下所示：

public static class HttpClientAccessor {
   public static Func<HttpClient> ValueFactory = () => {
      var client = new HttpClient();

      client.BaseAddress = new Uri("https://apiUrl.com");
      client.DefaultRequestHeaders.Accept.Clear();
      client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
      client.DefaultRequestHeaders.TryAddWithoutValidation("APIAccessToken", "token1");
      client.DefaultRequestHeaders.TryAddWithoutValidation("UserToken", "token2");

       return client;
   };

   private static Lazy<HttpClient> client = new Lazy<HttpClient>(ValueFactory);

   public static HttpClient HttpClient {
      get { return client.Value; }
   }
}

将React.js与Sublime Text 3一起使用

2 个答案: