在react.js中映射一个充满html元素的对象

Question

我正在努力映射包含一些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>  
        )}

谢谢！

Answer 1

我花了一些时间来缩进代码，并修复了一些错误，例如：

  {this.test().map(val => {
    val; // map already return the value inside the object you don't need to do val.l
  })}

  let l = [];
  for (let i = 0; i <= this.props.paginationData.totalPage; i++) {
  // using scoping declaration variable to avoid scope trouble

另外，您的l是一个字符串，如果要对其进行迭代，则它应该是一个数组。 也可以通过简单地使用{ this.test() }将字符串呈现为{ this.test() }完成此操作，下面的示例使用数组

test() {
  let l = [];
  for (let i = 0; i <= this.props.paginationData.totalPage; i++) {
    if (i == parseInt(this.props.paginationData.currentPage)) {
      l.push(
        <li className="page-item active">
          <a className="page-link" href="#">
            {this.props.paginationData.currentPage}
          </a>
        </li>
      );
    } else {
      l.push(
        <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(val => {
            val;
          })}
        </ul>
      </div>
    );
  }
}

Answer 2

我试图简化一下您在这里所做的事情。 那么这个解决方案呢：

render() {
    let paginationButtons = [];
    this.props.paginationData.forEach((button, index) => {
        if (index !== this.props.paginationData.currentPage) {
            paginationButtons.push(<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 {
            paginationButtons.push(<li className="page-item active"><a className="page-link" href="#">{index}</a></li>);
        }
    })
    return (
        <div className="container">     
            <ul className="pagination"> 
                {paginationButtons}
             </ul>
            }
        </div>  
    )
}

当然，您可以在return到单独的函数（如test()之前迁移零件，并像{this.test()}一样在渲染器中使用它。

Answer 3

_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语句逻辑是什么，但它应该可以工作