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

Question

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

代码片段:

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

您应该从 map 函数返回

{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>    
)
)}