javascript - react JS : Uncaught Error: parse Error: Unexpected token

Question

我是 React 新手(我正在将其合并到我的 ruby​​ on Rails 项目中)，这里是我制作的组件:

  <div id="articles"></div>
  <script type="text/jsx">



var Article=React.createClass({
    render: function(){
         return(
           <div>
             {this.props.data}.map(function(item){
               {item.name}  
             })
           </div>
         )
    }
});




var input = [{name: "hello", email: "hello@example.com"}]

React.render(<Article data={input} />, document.getElementById("articles"))

当我运行这个时，这是我得到的错误:

Uncaught Error: Parse Error: Line 7: Unexpected token .

{item.name}  

我已将一个 prop 设置为数组。我只想输出数组内的名称哈希键 - 为什么我会收到此错误，在我看来这应该有效？

Answer 1

您不会在 map 语句中返回任何内容，请尝试编写

return {item.name};

但是，我建议您尝试将 map 函数移至立即渲染之外，这样更易​​于阅读且不易出错。

 <div id="articles"></div>
  <script type="text/jsx">

var Article=React.createClass({
    render: function() {
         var rows = this.props.data.map(function(item) {
               //You could return any valid jsx here, like <span>{item.name}</span>
               return item.name;
         });
         return(
           <div>  
               {rows}
           </div>
         )
    }
});

var input = [{name: "hello", email: "hello@example.com"}
React.render(<Article data={input} />, document.getElementById("articles"))