web-dev-qa-db-fra.com

Comment analyser le HTML vers le composant React?

Voici mon senario:
1. Demande d'application CMS (Content management system) pour le contenu des pages.
2. Retour du CMS "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. L'application consomme le contenu, rend le composant correspondant avec les données fournies dans l'attribut.

Je ne peux pas comprendre comment faire étape 3 de la manière React, tout conseil est apprécié.

Merci @Glenn Reyes, voici un Sandbox pour montrer le problème.

import React from 'react';
import { render } from 'react-dom';

const SpecialButton = ({ children, color }) => (
  <button style={{color}}>{children}</button>
);

const htmlFromCMS = `
<div>Hi, 
  <SpecialButton color="red">My Button</SpecialButton>
</div>`;

const App = () => (
  <div dangerouslySetInnerHTML={{__html: htmlFromCMS}}>
  </div>
);

// expect to be same as
// const App = () => (
//   <div>Hi, 
//     <SpecialButton color="red">My Button</SpecialButton>
//   </div>
// );

render(<App />, document.getElementById('root'));

Voici une démo live faite par Vuejs. Chaîne "<div v-demo-widget></div>" pourrait être traité comme une directive Vuejs et rendu. Code source .

javascripthtmlreactjscompilationcontent-management-system
13
Sing

Vous voudrez probablement approfondir dangerouslySetInnerHTML . Voici un exemple de rendu HTML à partir d'une chaîne dans un composant React:

import React from 'react';
import { render } from 'react-dom';

const htmlString = '<h1>Hello World! ????</h1>';

const App = () => (
  <div dangerouslySetInnerHTML={{ __html: htmlString }} />
);

render(<App />, document.getElementById('root'));

Exemple complet ici: https://codesandbox.io/s/xv40xXQzE

En savoir plus sur dangerouslySetInnerHTML dans les documents React ici: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

17
glennreyes

Vous pouvez utiliser le react-html-parser au cas où vous ne voudriez pas utiliser l'attribut dangerouslySetInnerHTML

import React from 'react';
import { render } from 'react-dom';
import ReactHtmlParser from 'react-html-parser';

const SpecialButton = ({ children, color }) => (
  <button style={{color}}>{children}</button>
);

const htmlFromCMS = `
<div>Hi, 
  <SpecialButton color="red">My Button</SpecialButton>
</div>`;

const App = () => (
  <div>
     {ReactHtmlParser(htmlFromCMS)}
  </div>
);


render(<App />, document.getElementById('root'));

Joyeux codage !!!

5
EsterlingAccime Youtuber

Pour toute amélioration future de GProst Answer, vous pouvez utiliser ReactDOMserver, c'est ainsi que nous pouvons implémenter la même chose.

import React from "react";
import { render } from "react-dom";
import { renderToString } from "react-dom/server";

const SpecialButton = ({ children, color }) => (
  <button style={{ color }}>{children}</button>
);

const renderButton = renderToString(<SpecialButton>MyButton</SpecialButton>);

const htmlFromCMS = `
<div>Hi, 
  ${renderButton}
</div>`;

const App = () => <div dangerouslySetInnerHTML={{ __html: htmlFromCMS }} />;

render(<App />, document.getElementById("root"));
1
lost_in_magento

Vous pouvez essayer d'utiliser ReactDOMserver pour rendre <MyReactComponent /> dans html sur votre serveur, puis passez-le au client, où vous pouvez insérer tous les html reçus via dangerouslySetInnerHTML .

1
GProst