web-dev-qa-db-ja.com

ReactがDOMを直接管理していない地域のブラウザーでReactDOMServer.renderToStringを使用しても大丈夫ですか？

Leaflet （via react-leaflet ）を使用してアプリを作成しています。リーフレットはDOMを直接操作します。 react-leafletライブラリはそれを変更せず、Reactフレンドリーな方法でLeafletマップを制御するために使用できるReactコンポーネントを提供します。

このアプリでは、いくつかの単純な要素を含むdivであるカスタムマップマーカーを使用します。 Leafletでこれを行う方法は、マーカーのiconプロパティを DivIcon に設定することです。ここで、カスタムHTMLを設定できます。 DivIconのhtmlプロパティをHTMLを含む文字列に設定することにより、その内部HTMLを設定します。私の場合、HTMLをReactコンポーネントからレンダリングします。

それを行うには、ReactDOMServer.renderToString()を使用して、マップマーカー内で必要なコンポーネントを文字列にレンダリングし、それをhtmlとして設定するのが正しい方法のようです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} />
    )
  }
}

ただし、 React docs によると：

この[renderToString]はサーバーでのみ使用する必要があります。

これは厳格なルールですか、それともReactDOMのDOMの効率的な管理を回避することを人々に思いとどまらせることだけを意図したものですか？

自分の目標を達成するための別の（より良い）方法を考えることはできません。コメントやアイデアは大歓迎です。

reactjsleafletreact-dom
29
Shane Cavaliere

新しいドキュメントによると： https://reactjs.org/docs/react-dom-server.html

次の方法は、サーバー環境とブラウザー環境の両方で使用できます。

  • renderToString（）
  • renderToStaticMarkup（）
13
Thomas Grainger

私はそれが古すぎる質問であることを知っていますが、答えられていないので、私の考えを共有したかったです。

私は同じものrenderToStringを使用していましたが、ドキュメントではクライアント側で使用しないことを推奨しているため、別の方法で、react-domのrenderメソッドは、カスタムコンポーネントを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