使用ES6原型方法映射在React中没有呈现

Question

我的地图方法有什么问题吗？

var App = React.createClass({
   getInitialState(){
     return {
       items:[1,2,3]
     }
   },
   renderItem(){
     return(
       this.state.items.map((item,i))=>
         <li key={i}> {item} </li> 
     )
   },
   render(){
      return(
        <ul>
          {this.renderItem()}
        </ul>
      )
   }
})

无法看到任何渲染，检查控制台，没有发现错误。

Answer 1

你有一个语法问题：

this.state.items.map((item,i))=>
                             ^

删除该右括号，并将其放在下一个右括号旁边：

return(
  this.state.items.map((item,i)=>
  <li key={i}> {item} </li> 
))

Answer 2

首先，你需要获得额外的RIF )在地图上的参数列表

this.state.items.map((item,i))=> to this.state.items.map((item,i)=>

其次你需要添加另一个)来关闭return语句

 var App = React.createClass({ getInitialState(){ return { items:[1,2,3] } }, renderItem(){ return( this.state.items.map((item,i)=> <li key={i}> {item} </li> ) ) }, render(){ return( <ul> {this.renderItem()} </ul> ) } }) ReactDOM.render(<App/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="app"></div> 

Answer 3

试试这个，IMO这样更干净

var App = React.createClass({
   getInitialState(){
   return {
     items:[1,2,3]
   }
   },
   renderItem(item, index){
   return(
      <li key={index}> {item} </li> 
   )
   },
   render(){
      return(
      <ul>
        {this.state.items.map(this.renderItem, this)}
      </ul>
      )
   }
})

Answer 4

renderItem(){
  return(
   this.state.items.map((item,i)=> {
     return <li key={i}> {item} </li>;
   }
  )
},

问题出在.map ，你必须在{}中放置代码并return