javascript - 将返回语句列为变量并放入标记反应

Question

我想获取 ** 之间突出显示的代码部分，然后将其放在我在此处列出的标记中。这可能吗？如果是这样，最好的方法是什么。我认为可能有某种方法可以将函数声明为变量，然后在标记中加载时调用它？

render() {  
    return (
      <div className="content-slider-wrapper">
        <div className="content-slider-title">
          <span>PRODUCTS OF THE WEEK</span>
        </div>
        <div className={`${this.sliderData.length === 5 ? 'mt-xl-5' : ''} content-slider-container`}> 
          <div className="test-right" id="slider-move">
            <Carousel 
                ref={ref => (this.carousel = ref)}
                breakPoints={this.breakPoints} 
                disableArrowsOnEnd={true}
                **renderPagination={({ pages, activePage, onClick }) => {
                  let arr;
                  arr = this.getAmountOfPages(pages, activePage);

                  return (
                    <>
                    <div className="ggg">
                      <div className={`${this.sliderData.length === 5 ? 'd-xl-none' : ''} arrow-container`}>
                        {arr[0] == true &&
                        <img onClick={() => this.setDirection("previous")} className="arrow-left" src={ArrowRight} /> }
                        {arr[1] == true &&
                        <img onClick={() => this.setDirection("next")} src={ArrowRight} /> }
                      </div>
                      </div>
                      <div className={`${this.sliderData.length === 5 ? 'd-xl-none' : ''} black-slider-container`}>
                        {pages.map(page => {
                          const isActivePage = activePage === page
                          return (
                            <div className={isActivePage ? 'black-slider' : 'blank-slider'}
                              key={page}
                              onClick={() => onClick(page)}
                              active={isActivePage}
                            />
                          )
                        })}
                      </div>
                    </>
                  )
                }}**
                >
                {this.sliderData.map((item, index) => (
                  <div key={index} className="carousel-item-container">
                    <div className="carousel-image-container">
                      <img src={top} />
                    </div>
                    <div className="carousel-text-container">
                      <ul>
                        <li className="carousel-text-container-title">{item.title}</li>
                        <li className="carousel-text-container-text">{item.typeOfProduct}</li>
                        <li className="carousel-text-container-text line-through">RRP {item.rrp}</li>
                        <li className="carousel-text-container-text line-through">Our Price: {item.ourPrice}</li>
                        <li className="carousel-text-container-text">Sale Price: {item.salePrice}</li>
                      </ul>
                    </div>
                  </div>
                ))}
              </Carousel>
          </div>

///PLACE IT HERE
        </div>   
      </div>
    )
  }
}

标签： javascriptreactjs