javascript - 用 innerHTML 插入 JSX
问题描述
我正在尝试将以下 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>
}
}
标记：
<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;
解决方案
您希望 JSX 被解释还是按原样呈现（作为字符串）？因为 innerHTML DOMstring 值是由浏览器解析的，它不处理任何 JSX 转换。这是在你的 JavaScript 到达浏览器之前由 Babel 处理的。
但我相信您可以使用该ReactDOM.render()函数，将您的 JSX 作为第一个参数和this.arrowRef.current第二个参数提供。
请注意，ReactDOM 是您需要导入的单独包。
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)