web-dev-qa-db-fra.com

Comment rendre (imprimer) JSX sous forme de chaîne?

Ici, JSX est un exemple de code:

export default class Element extends React.Component {
  render() {
    return (
      <div>
        <div className="alert alert-success">
          {this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)}
        </div>
      </div>
    )
  }
}

Comment obtenir une chaîne comme celle-ci?

<div><div className="alert alert-success">{this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)}</div></div>

PD: J'ai obtenu React composants que je rend sur le serveur. Je veux les obtenir sous forme de chaînes pour les transformer en une autre bibliothèque de modèles côté client.

javascriptreactjsjsx
12
user1704398

appelez simplement renderToStaticMarkup() et vous devriez obtenir le langage de balisage html statique généré par React.

un peu comme ça:

import ReactDOMServer from 'react-dom/server';
import Element from './path/to/element/class';

const element = <Element />;

ReactDOMServer.renderToStaticMarkup(element)

voici d'autres documents à ce sujet:

https://facebook.github.io/react/docs/react-dom-server.html#rendertostaticmarkup

13
beniutek