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))=>至this.state.items.map((item,i)=>

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

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

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

中

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

4 个答案: