Question

我目前正在尝试修改React组件，以便可以从常规的非React脚本中调用它。我尝试使用的特定组件是'react-responsive-carousel'。

HTML：

<div id="slides" style="display: none">
    <div>
      <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
      <p className="legend">Legend 1</p>
    </div>
    <div>
      <img src="http://lorempixel.com/output/cats-q-c-640-480-2.jpg" />
      <p className="legend">Legend 2</p>
    </div>
<div>

<div id="root"></div>

然后在“反应适配器”中：

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

function renderCarousel(targetElementId, html) {
  const App = function() {
    return <Carousel>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </Carousel>;
  };

  render(<App />, document.getElementById(targetElementId));
}

然后非反应脚本将使用的调用代码：

renderCarousel("root", document.getElementById("slides").innerHTML);

与此相关的问题是，引入了一个额外的“ div”，这会破坏轮播的行为。有什么方法可以传递这种HTML，使id为'slides'的div内部HTML直接位于Carousel组件的下面，或者还有另一种实现预期目标的方法？

请注意，这需要在ES5调用上下文中进行。

Answer 1

我理解了这个问题，所以您那里的html会正确显示所有幻灯片吗？

我要做的是将幻灯片作为数组传递给函数：

renderCarousel(targetElementId, slides)

因此您可以执行以下操作：

function renderCarousel(targetElementId, slides=[]) {
  const App = function() {
    return <Carousel>
      {slides.map(html => <div dangerouslySetInnerHTML={{ __html: html }} />)}
    </Carousel>;
  };

  render(<App />, document.getElementById(targetElementId));
}

它应该与类似的东西一起工作

const slides = Array.from(document.getElementById("slides").children)
renderCarousel("root", slides.map(slide=> slide.innerHTML))

让我知道怎么回事！

在没有div的情况下使用React的危险SetInnerHTML？

1 个答案: