web-dev-qa-db-ja.com

htmlをReactコンポーネントに解析するには？

これは私のシナリオです：
1。ページコンテンツのアプリケーションリクエストCMS（コンテンツ管理システム）。
2。 CMSリターン"<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3。アプリケーションはコンテンツを消費し、属性で提供されたデータで対応するコンポーネントをレンダリングします。

方法がわからないステップ3in React方法、アドバイスをいただければ幸いです。

@Glenn Reyesに感謝します。問題を示す Sandbox です。

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'));

こちらがライブデモです Vuejsによって作成されました。文字列"<div v-demo-widget></div>"はVuejsディレクティブとして扱われ、レンダリングされます。 ソースコード 。

javascripthtmlreactjscompilationcontent-management-system
13
Sing

おそらく、 dangerouslySetInnerHTML をさらに詳しく調べたいと思うでしょう。 Reactコンポーネントの文字列からHTMLをレンダリングする方法の例を次に示します。

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'));

完全な例： https://codesandbox.io/s/xv40xXQzE

dangerouslySetInnerHTMLの詳細については、React docsのドキュメントを参照してください： https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

17
glennreyes

dangerouslySetInnerHTML属性を使用したくない場合は、react-html-parserを使用できます

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'));

ハッピーコーディング!!!

5
EsterlingAccime Youtuber

GProst Answerの将来の機能強化だけで、ReactDOMserverを使用できます。これが同じ実装方法です。

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

ReactDOMserver を使用して、<MyReactComponent />をサーバーのhtmlに入力し、クライアントに渡します。クライアントでは、受信したすべてのhtmlを dangerouslySetInnerHTML 。

1
GProst