我正在开发 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 的 r ..etc 上,我真的不明白为什么
如果有人能帮我解决这个问题 谢谢
最佳答案
您的 JSX 语法不正确。我通过将代码复制到 https://babeljs.io/repl/ 来测试这一点。具体来说,在您的 User
组件中,您有:
<img src="{this.props.pics} />
您需要删除该行中的双引号。
关于javascript - Sails + ReactJS : Unexpected token, 找不到原因,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35728474/