ReactJS JSX toString()

Question

Je suis en train d'écrire un site de documentation basé sur React. Je veux montrer le code qui est nécessaire pour utiliser un composant donné de mon framework. En même temps, je voudrais montrer le fonctionnement réel du composant, comme une vue côte à côte.

Actuellement, j'ajoute le composant en tant que chaîne pour l'implémentation de référence et le composant en tant que JSX pour le scénario en cours d'exécution. Quelque chose comme ceci:

var ButtonDoc = React.createClass({ 
    render: function() { 
    let buttonComponent = (
     <Button label="Add" /> 
    ); 

    let buttonCode = `<Button label="Add" />`; 

    return (
     <div> 
     {buttonComponent} 
     <pre><code>{buttonCode}</code></pre> 
     </div> 
    ); 
    } 
}); 

Question: Est-il possible que je peux obtenir la représentation de chaîne du composant donné React sans qu'il soit nécessaire de reproduire le code?

Je me attends quelque chose comme ceci:

var ButtonDoc = React.createClass({ 
    render: function() { 
    let buttonComponent = (
     <Button label="Add" /> 
    ); 

    let buttonCode = `${buttonComponent}`; 

    return (
     <div> 
     {buttonComponent} 
     <pre><code>{buttonCode}</code></pre> 
     </div> 
    ); 
    } 
}); 

La sortie du code donné est object [object].

Answer 1

Comme je n'ai rien trouvé qui résolve mon problème, j'ai fini par créer un dépôt npm pour réaliser cette tâche.

https://github.com/alansouzati/jsx-to-string

Utilisation:

import React from 'react'; 
import jsxToString from 'jsx-to-string'; 

let Basic = React.createClass({ 
    render() { 
    return (
     <div /> 
    ); 
    } 
}); //this is your react component 

console.log(jsxToString(<Basic test1="test" />)); //outputs: <Basic test1="test" />