Sails + ReactJS：意外的令牌，找不到原因答案

【问题标题】：Sails + ReactJS : Unexpected token, can't find whySails + ReactJS：意外的令牌，找不到原因
【发布时间】：2016-06-14 04:47:05
【问题描述】：

我正在开发一个 Sails JS 应用程序，并尝试在其中使用 React。几天以来，我对 React 和 Sails 都是新手。我用一个“简单”的例子尝试了它，我有一个用户列表，我想使用 React 显示他们的列表。我在“MainController”中有一个返回用户对象的方法“getUsers”。当我在浏览器上转到“main/getUsers”时，我得到：

   {
  "users": [
    {
      "id": 6,
      "username": "User1",
      "password": "sha1$e89ea270$1$5937f3d94f90280e3dc5a435bd8c8128f9d29ab2",
      "mail": "test@mail.fr",
      "pics": null,
      "createdAt": "2016-02-29T12:58:46.000Z",
      "updatedAt": "2016-02-29T12:58:46.000Z"
    },
    {
      "id": 3,
      "username": "test",
      "password": "sha1$88a41992$1$f43d52da22e2082a06625063e36c4a965451094f",
      "mail": "test@hotmail.fr",
      "pics": null,
      "createdAt": "2016-02-29T12:23:57.000Z",
      "updatedAt": "2016-02-29T13:05:42.000Z"
    },
    (...)
  ]
}

我显示它们的代码如下：

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

<script type="text/babel">
    var User = React.createClass({
        render: function () {
            <p class='oneUserList col-xs-3 col-md-1'>
                <img src="{this.props.pics} />
                {this.props.username}
            </p>
        }
    });

    var UserList = React.createClass({
        getInitialState: function () {
            return {users: []};
        },
        componentDidMount: function () {
            $.ajax({
                url: "/main/getUsers/",
                dataType: 'json',
                cache: false
            }).exec(function (response) {
                this.setState({users: response.records });
            }.bind(this));
        },
        render: function () {
            var self = this;

            var users = this.state.users.map(function (p) {
                return <User username={p.username} pics = {p.pics} />
            });

            if (!users.length) {
                users = <p>Loading users ..</p>;
            }

            return (
                {users}
            );
        }
    });

    ReactDOM.render(
        <UserList />,
        document.getElementById("example")
    );
</script>

我尝试了很多方法，但我总是遇到同样的错误： “语法错误：嵌入：意外令牌（x：y）” 现在它在 'url: "/main/getUsers"' 之前的空间上，但是如果在 ajax 的 a 上，那么在 url ..etc 的 r 上，我真的不明白为什么

如果有人可以帮助我，谢谢

【问题讨论】：

你确定它没有在 JSX 上窒息吗？当缺少 JSX 解析器时，通常会出现“意外令牌”错误

标签： javascript node.js web reactjs sails.js

【解决方案1】：

您的 JSX 语法不正确。我通过将您的代码复制到https://babeljs.io/repl/ 来测试这一点。具体来说，在您的 User 组件中，您有：

<img src="{this.props.pics} />

您需要从该行中删除双引号。

【讨论】：

原来如此，说真的.. >