在 render() -> return() 中使用 Map 函数，但没有显示

Question

我正在学习 React，但在使用渲染函数内的 UL JSX 元素内的映射函数渲染列表 (ul>li's) 时遇到问题。我在互联网上搜索但无法解决问题。 下面是我的组件代码：（在这个组件中实现分页）

代码 sn-p：

    //function returning list with values 1-total_pages e.g total_pages=5
        make_pages_list = (start, end, step) => {
        return Array.from(Array.from(Array(Math.ceil((end-start+1)/step)).keys()), x => start+ x*step);
    }

render() {
   return(
      <div>
      <div>Hi there
       <form>
           <input type="text"/>
           <input type="submit"/>
       </form>
      </div>
     ........ 
     //other JSX elements are also there
    //then
                    <div>
                        <div className='ui container'>
                            <ul style={{listStyle: "none"}}>
                                {this.make_pages_list(1,this.state.total_pages, 1).map((n) =>{
                                   <li key={n} id={n}><a href="#">{n}</a></li>    
                                }
                                )}
                            </ul>
                        </div>
                    </div>
                </div>

   )

}

另外： 我也有模块"react-addons-create-fragment"，但是 ul 的样式不起作用。

Answer 1

你应该从地图功能return

{this.make_pages_list(1,this.state.total_pages, 1).map((n) =>{
   return <li key={n} id={n}><a href="#">{n   }</a></li>    
}
)}

或

{this.make_pages_list(1,this.state.total_pages, 1).map((n) =>(
   <li key={n} id={n}><a href="#">{n   }</a></li>    
)
)}