web-dev-qa-db-fra.com

Est-il correct d'utiliser ReactDOMServer.renderToString dans le navigateur dans les zones où React ne gère pas directement le DOM?

Je travaille sur une application utilisant Leaflet (via react-leaflet ). Dépliant manipule directement le DOM. La bibliothèque react-leaflet ne change rien à cela, elle vous donne juste React composants que vous pouvez utiliser pour contrôler votre carte Leaflet d'une manière compatible avec React.

Dans cette application, je veux utiliser des marqueurs de carte personnalisés qui sont des divs contenant quelques éléments simples. La façon de le faire dans Leaflet est de définir la propriété icon de votre marqueur sur DivIcon , dans laquelle vous pouvez définir votre code HTML personnalisé. Vous définissez ce code HTML interne en définissant la propriété html du DivIcon sur une chaîne contenant le code HTML. Dans mon cas, je veux que le HTML soit rendu à partir d'un composant React.

Pour ce faire, il semble que l'approche correcte consiste à utiliser ReactDOMServer.renderToString() pour rendre le composant que je veux à l'intérieur du marqueur de carte dans une chaîne, que je définirais ensuite comme html propriété du DivIcon:

MyMarker.js:

import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { Marker } from 'react-leaflet'
import { divIcon } from 'leaflet'

import MarkerContents from './MarkerContents'

export class MyMarker extends Component {
  render() {
    const markerContents = renderToString(<MarkerContents data={this.props.data} />)
    const myDivIcon = divIcon({
      className: 'my-marker',
      html: markerContents
    })

    return (
      <Marker
        position={this.props.position}
        icon={myDivIcon} />
    )
  }
}

Cependant, selon les React docs :

Ce [renderToString] ne doit être utilisé que sur le serveur.

Est-ce une règle stricte, ou est-ce seulement destiné à dissuader les gens de contourner la gestion efficace de ReactDOM du DOM?

Je ne peux pas penser à une autre (meilleure) façon d'accomplir ce que je recherche. Tout commentaire ou idée serait grandement apprécié.

reactjsleafletreact-dom
29
Shane Cavaliere

Selon la nouvelle documentation: https://reactjs.org/docs/react-dom-server.html

Les méthodes suivantes peuvent être utilisées dans les environnements de serveur et de navigateur:

  • renderToString ()
  • renderToStaticMarkup ()
13
Thomas Grainger

Je sais que c'est une question trop ancienne, mais comme il n'y a pas de réponse, je voulais partager mes réflexions.

J'utilisais la même chose, renderToString, mais comme la documentation recommande de ne pas l'utiliser côté client, je l'ai fait d'une autre manière, en utilisant le react-domrender, méthode pour rendre le composant personnalisé en div

var myDiv = document.createElement('div');

ReactDOM.render(
  <MarkerContents data={this.props.data} />,
  myDiv
);

var myIcon = L.divIcon({ 
    iconSize: new L.Point(50, 50), 
    html: myDiv.innerHTML
});
8
Mohamed Shaaban