Estoy usando wordpress sin cabeza para la generación de contenido. Devuelve html pregenerado. Lo puse en reaccionar usando un complemento Html-React-Parser. El complemento también le permite reemplazar elementos. En este punto, cambio el envoltorio del control deslizante a un componente. Y puse elementos secundarios dentro con domToReact(niños). Al inicio, espero ver un control deslizante hecho. Pero hay un div vacío delante de cada diapositiva. Hice una caja de arena donde puedes ver este problema.
https://codesandbox.io/s/interesting-booth-1jhyvm?file=/src/App.js
import SwipeableViews from "react-swipeable-views"; import parse, { domToReact } from "html-react-parser"; const html = ` <div class="slider"> <div class="slide">123</div> <div class="slide">456</div> <div class="slide">789</div> </div> `; const options = { replace: ({ attribs, children, data }) => { if (!attribs) { return; } if (attribs.class === "slider") { return ( <SwipeableViews enableMouseEvents> {domToReact(children)} </SwipeableViews> ); } } }; export default function App() { return ( <div className="App"> {parse(html, options)} </div> ); }