Question

我正在使用我自己的服务器（apache）和建议的HTML文件以及教程示例的逐字副本来完成reactjs教程......

最简单的示例在我的服务器上失败但在JSFiddle上运行..

带脚本的HTML文件如下所示..

脚本失败，并在render：function（）{...

中出现语法错误

firefox和Safari中的错误消息（mac版，最新版）..

＆＃34;＆＃34;＆＃34; SyntaxError：期望表达式，得到＆＃39;＆lt;＆＃39; React.render（，document.getElementById（＆＃39; container＆＃39;）＆＃34;＆＃34;＆＃34; [我的档案]

<html>
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<script>
var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

</script>

<body>

    <div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>


</body>
</html>

Answer 1

这是一个旧线程，但是当我在我的React应用程序上执行npm run build并使用WinSCP将其从Windows框复制到Linux Box时，我最近遇到了此错误。我正在使用nginx在Linux机器上提供应用程序。结果我的问题是静态目录中的JS文件没有执行权限。这导致了一个错误，只是为我的index.html而不是js文件服务，因此SyntaxError：expected表达式得到了＆＃39;＆lt;＆＃39;。希望这将有助于将来偶然发现这个主题的人。只需从应用目录

运行chmod -R 755 static即可

Answer 2

在我的 html 文件中通过 cdn 使用 react 时，我也遇到了同样的错误，我偶然发现了这篇看起来与我的问题非常相似的帖子。

我的代码的问题是js无法理解我在组件render方法中使用的jsx代码。

这是我修复它的方法。除了反应，我为 babel-standalone 添加了另一个 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

以及在包装我的 js 代码的脚本标记上将 type="text/javascript" 更改为 type="text/babel"。

<script type="text/babel">/* my react code containing jsx */</script>

发布这个答案，希望它可以帮助面临同样问题的人。

Answer 3

Narsters的答案对我有用，但我必须将此行添加到package.json

 "homepage": "./",

Answer 4

我是刚加入网站的新手。我在https://reactjs.org/docs/forms.html中找到了演示代码并且codepen中的代码是不同的。

我从Codepen下载了代码。就是这样：（有效）

  render() {
    return (
      React.createElement("form", { onSubmit: this.handleSubmit },
      React.createElement("label", null, "Name:",
      React.createElement("input", { type: "text", value: this.state.value, onChange: this.handleChange })),
      React.createElement("input", { type: "submit", value: "Submit" }))
    );
  }
}


ReactDOM.render(
React.createElement(NameForm, null),
document.getElementById('root'));

官方站点中的代码是这样的：（不起作用）

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

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

我不知道为什么它们不同，但是我只知道我应该使用方法而不是标签

Answer 5

我有同样的问题，问题是

npm init

运行此命令后，它会问一些问题并将数据填充到package.json中，并更改homepage和其他内容，我刚刚打开package.json并删除了npm在文件description,homepage,author

的结尾

Answer 6

此问题可能有不同的原因。 @Michelle Tilley已经在上面回答了一个问题

确保已检查并尝试过第一种解决方案。

所以让我解释一下我的情况是什么原因。

我错过了在%PUBLIC_URL%文件中使用index.html的原因，这就是我面临此问题的原因。

index.html 假设您已经导入了用于布局和Js的文件，如下所示。

<script src="/vendor/jquery/dist/jquery.min.js"></script>

这会产生错误，例如

SyntaxError: expected expression, got '<' jquery.min.js:1
SyntaxError: expected expression, got '<' bootstrap.bundle.min.js:1
SyntaxError: expected expression, got '<' js.cookie.js:1

解决此问题。您需要使用%PUBLIC_URL%例如

正确导入文件

<script src="%PUBLIC_URL%/vendor/jquery/dist/jquery.min.js"></script>
<script src="%PUBLIC_URL%/vendor/js/bootstrap.bundle.min.js"></script>

希望这对其他人有帮助。干杯

语法错误＆＃34;期待表达，得到＆＃39;＆lt;＆＃39;＆＃34;在尝试运行reactjs教程时

6 个答案: