Estoy tratando de agregar un ícono de precargador antes de renderizar una imagen en el componente React usando el siguiente código:
export default class MediaPostItem extends BaseComponent { public constructor(props: IMediaPostItemProperties) { super(props); this.state = { imageIsReady: false, }; } componentDidMount(): void { const img = new Image(); img.onload = () => this.setState({ imageIsReady: true }); img.src = this.props.item.featuredImage?.node.sourceUrl; } public render(): ReactNode { const { item } = this.props; const { imageIsReady } = this.state; return( {imageIsReady ? ( <img src={item.featuredImage?.node.sourceUrl}/> ) : (<div> Loading</div>) }) } }Ahora, en el otro componente, doy cadenas HTML como un HTML real en un componente de reacción usando el siguiente código:
<div dangerouslySetInnerHTML={{ __html: props.content }}></div> El contenido incluye algunas etiquetas <img> y lo que necesito es agregar un precargador para estas etiquetas img también. No estoy seguro de si es posible o no. ¿Hay alguna forma de aplicar cambios a las cadenas HTML cuando se trata de accesorios?
Puedes hacerlo con ReactDOM.render .
import { render } from "react-dom"; const htmlString = ` <div> <div id="toBeReplaced"/></div> </div> `; class ReplacedComponent extends React.Component { constructor(props) { super(props); } render() { return <h1>Replaced Component</h1>; } } export default class Parent extends React.Component { constructor(props) { super(props); } componentDidMount() { render( <React.StrictMode> <ReplacedComponent /> </React.StrictMode>, document.getElementById("toBeReplaced") ); } render() { return <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>; } } Debería seleccionar las etiquetas <img> , con algún atributo (clase/id), luego recorrerlas y representar su componente.