首页 > 解决方案 > 在 react.js 中映射一个充满 html 元素的对象

问题描述

我正在努力映射包含一些 HTML 元素的对象,我只想要我的 ul 中的所有 li 元素。

我一直在尝试几种映射用法,但无法使其正常工作。

test(){ 

    var l;
    for(var i = 0; i <= this.props.paginationData.totalPage; i++){
        if (i == parseInt(this.props.paginationData.currentPage)){
            l += <li className="page-item active"><a className="page-link" href="#">{this.props.paginationData.currentPage}</a></li>
        }
        else{
            l += <li className="page-item"><a className="page-link" onClick={()=>this.props.search(this.props.sortData.orderby, this.props.sortData.sens, this.props.searchTerm, i)} >Précedent</a></li>
        }
    }
    return l

}
render(){



    if (this.props.paginationData.totalPage <= 5){
        return(


            <div className="container">     
                <ul className="pagination"> 
                    {this.test().map(obj => {obj.l} )}
                 </ul>
            </div>  
        )}

谢谢!

标签: javascriptjsonreactjs

解决方案


_getPaginationButtons = (paginationData)=>{
return paginationData.map((res,key)=>{
    if (key !== this.props.paginationData.currentPage) {
      return (<li className="page-item"><a className="page-link" onClick={()=>this.props.search(this.props.sortData.orderby, this.props.sortData.sens, this.props.searchTerm, i)} >Précedent</a></li>))
     }

   else {
    return (<li className="page-item active"><a className="page-link" href="#">{index}</a></li>)
    })
    }


    render() {
    const {paginationData} = this.props
        return (
            <div className="container">     
                <ul className="pagination"> 
                    {this._getPaginationButtons(paginationData)}
                 </ul>
                }
            </div>  
        )
    }

我不知道你的 if 语句逻辑是什么,但它应该可以工作


推荐阅读