Javascript 使用innerHTML插入JSX_Javascript_Html_Css_Reactjs

Javascript 使用innerHTML插入JSX

javascript html css reactjs

Javascript 使用innerHTML插入JSX,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,我试图将下面的JSX插入我的标记中，但一旦插入，我就会得到一个[object，object]。如何将这张JSX放入我的div中调用以插入JSX的函数： placeInDiv = (arr) => { if (this.arrowRef.current !== null) { this.arrowRef.current.innerHTML = <div className={`${this.sliderData.length === 5 ? 'd-xl-

我试图将下面的JSX插入我的标记中，但一旦插入，我就会得到一个[object，object]。如何将这张JSX放入我的div中

调用以插入JSX的函数：

   placeInDiv = (arr) => { 

    if (this.arrowRef.current !== null) {
      this.arrowRef.current.innerHTML = <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>
    }

  }

placeInDiv=（arr）=>{
如果（this.arrowRef.current！==null）{
this.arrowRef.current.innerHTML=
{arr[0]==true&&
}
{arr[1]==true&&
}
}
}

标记：

<div className="ggg" id="arrows" ref={this.arrowRef}>
</div>

解决这个问题有很大困难，请帮忙

下面是完整的代码块，演示了我试图实现的目标。如您所见，该函数在渲染中被调用，并传递特定的参数

完整代码块：

import Carousel from 'react-elastic-carousel';
import top from '../images/top.png';
import ArrowRight from '../images/arrowRight.svg';
import React, {Component} from 'react';
class contentSlider extends Component {

  state = {
    disabled: '',
    leftArrow: false,
    rightArrow: true
  }


  componentDidMount() {
    
  }


  arrowRef = React.createRef();

  sliderData = [
    {
      title: 'POLO',
      typeOfcontent: 'Mens T-Shirt',
      rrp: '£105',
      ourPrice: '£55',
      salePrice: '£45',
      image: top
    },
    {
      title: 'POLO',
      typeOfcontent: 'Mens T-Shirt',
      rrp: '£105',
      ourPrice: '£55',
      salePrice: '£45',
      image: top
    },
    {
      title: 'POLO',
      typeOfcontent: 'Mens T-Shirt',
      rrp: '£105',
      ourPrice: '£55',
      salePrice: '£45',
      image: top
    },
    {
      title: 'POLO',
      typeOfcontent: 'Mens T-Shirt',
      rrp: '£105',
      ourPrice: '£55',
      salePrice: '£45',
      image: top
    },
    {
      title: 'POLO',
      typeOfcontent: 'Mens T-Shirt',
      rrp: '£105',
      ourPrice: '£55',
      salePrice: '£45',
      image: top
    },
    {
      title: 'POLO',
      typeOfcontent: 'Mens T-Shirt',
      rrp: '£105',
      ourPrice: '£55',
      salePrice: '£45',
      image: top
    },
    {
      title: 'POLO',
      typeOfcontent: 'Mens T-Shirt',
      rrp: '£105',
      ourPrice: '£55',
      salePrice: '£45',
      image: top
    }

  ]

  breakPoints = [
    { width: 2, itemsToShow: 2, itemsToScroll: 2 },
    { width: 550, itemsToShow: 3, itemsToScroll: 3},
    { width: 850, itemsToShow: 4, itemsToScroll: 3 },
    { width: 970, itemsToShow: 4, itemsToScroll: 3 },
    { width: 1150, itemsToShow: 5, itemsToScroll: 3 },
  ] 

  setDirection = (slideDirection) => {
    switch(slideDirection) {
      case "next":
        this.carousel.slideNext();
        let slideNext = document.getElementById('slider-move');
        
        if(slideNext.classList.contains('test-right')) {
          slideNext.classList.remove('test-right');
          slideNext.classList.add('test-left');
        }
            
      break;
      case "previous":
        this.carousel.slidePrev();
        let slidePrevious = document.getElementById('slider-move');
        
        if(slidePrevious.classList.contains('test-left')) {
          slidePrevious.classList.remove('test-left');
          slidePrevious.classList.add('test-right');
        }

      break;
    }
  }

  getAmountOfPages = (pages, activePage ) => {

    let firstItem = pages[0];
    let [lastItem] = pages.slice(-1);
    let array = [];

    if(firstItem === activePage) {
      array.push(false, true);
      return array;
    } else if(lastItem === activePage) {
      array.push(true, false);
      return array;
    } else {
      array.push(true, true);
      return array;
    }
  }

  placeInDiv = (arr) => { 

    if (this.arrowRef.current !== null) {
      ReactDOM.render( this.arrowRef.current.innerHTML = <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>, this.arrowRef.current)
     
    }

  }

  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);

                  this.placeInDiv(arr);
                  return (
                    <>
                      <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>
        </div>   
        <div className="ggg" id="arrows" ref={this.arrowRef}>
<p>dasda</p>
        </div>
      </div>
    )
  }
}

export default contentSlider;

从“react elastic Carousel”导入转盘；
从“../images/top.png”导入顶部；
从“../images/ArrowRight.svg”导入ArrowRight；
从“React”导入React，{Component}；
类contentSlider扩展组件{
状态={
已禁用：“”，
左箭头：错，
向右箭头：对
}
componentDidMount（）{
}
arrowRef=React.createRef（）；
滑块数据=[
{
标题:"马球",，
内容类型：“男士T恤”，
rrp:'105英镑'，
我们的价格：'55英镑'，
售价：45英镑，
图片：顶部
},
{
标题:"马球",，
内容类型：“男士T恤”，
rrp:'105英镑'，
我们的价格：'55英镑'，
售价：45英镑，
图片：顶部
},
{
标题:"马球",，
内容类型：“男士T恤”，
rrp:'105英镑'，
我们的价格：'55英镑'，
售价：45英镑，
图片：顶部
},
{
标题:"马球",，
内容类型：“男士T恤”，
rrp:'105英镑'，
我们的价格：'55英镑'，
售价：45英镑，
图片：顶部
},
{
标题:"马球",，
内容类型：“男士T恤”，
rrp:'105英镑'，
我们的价格：'55英镑'，
售价：45英镑，
图片：顶部
},
{
标题:"马球",，
内容类型：“男士T恤”，
rrp:'105英镑'，
我们的价格：'55英镑'，
售价：45英镑，
图片：顶部
},
{
标题:"马球",，
内容类型：“男士T恤”，
rrp:'105英镑'，
我们的价格：'55英镑'，
售价：45英镑，
图片：顶部
}
]
断点=[
{width:2，itemsToShow:2，itemsToScroll:2}，
{width:550，itemsToShow:3，itemsToScroll:3}，
{width:850，itemsToShow:4，itemsToScroll:3}，
{width:970，itemsToShow:4，itemsToScroll:3}，
{width:1150，itemsToShow:5，itemsToScroll:3}，
] 
设置方向=（滑动方向）=>{
开关（滑动方向）{
案例“下一个”：
这个.carousel.slideNext（）；
让slideNext=document.getElementById（'slider-move'）；
if（slideNext.classList.contains（'test-right'））{
slideNext.classList.remove（'test-right'）；
添加（'test-left'）；
}
打破
“以前”一案：
this.carousel.slidePrev（）；
让slidePrevious=document.getElementById（'slider-move'）；
if（slidePrevious.classList.contains（'test-left'））{
slidePrevious.classList.remove（'test-left'）；
slidePrevious.classList.add（'test-right'）；
}
打破
}
}
GetAmountOffPage=（页面，活动页面）=>{
设firstItem=pages[0]；
let[lastItem]=pages.slice（-1）；
让数组=[]；
如果（firstItem==activePage）{
array.push（false，true）；
返回数组；
}else if（lastItem==activePage）{
array.push（真、假）；
返回数组；
}否则{
array.push（true，true）；
返回数组；
}
}
placeInDiv=（arr）=>{
如果（this.arrowRef.current！==null）{
ReactDOM.render（this.arrowRef.current.innerHTML=
{arr[0]==true&&
}
{arr[1]==true&&
}
，此为.arrowRef.current）
}
}
render（）{
返回(
本周产品
（this.carousel=ref）}
断点={this.breakPoints}
disableArrowsOnEnd={true}
renderPagination={（{pages，activePage，onClick}）=>{
让arr；
arr=this.getamountofpage（pages，activePage）；
本.placeInDiv（arr）；
返回(
{pages.map（页面=>{
常量isActivePage=activePage==page
返回(
单击（第页）}
活动={isActivePage}
/>
)
})}
)
}}
>
{this.sliderData.map（（项，索引）=>(

{item.title}
{item.typeOfProduct}
通过“>RRP{item.RRP}
我们的价格：{item.ourPrice}
销售价格：{item.salePrice}

))}
达斯达
)
}
}
导出默认内容滑块；

您是否希望JSX被解释或只是按原样呈现（作为字符串）？因为innerHTML DOMstring值是由浏览器解析的，它不处理任何JSX转换。这是在JavaScript到达目标之前由Babel处理的

const div = <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>

ReactDOM.render(div, this.arrowRef.current)