在同构React应用中渲染HTML字符串

Question

在非SPA方案中，将经过清理但随机的HTML字符串作为输入：

<p>...</p>
<p>...</p>
<gallery image-ids=""/>
<player video-id="..."/>
<p>...</p>

该字符串源自WYSIWYG编辑器，并包含嵌套的常规HTML标记和应呈现给小部件的有限数量的自定义元素（组件）。

目前，这样的HTML代码段应该分别在服务器端（Express）上呈现，但最终也将在客户端上呈现，作为同构应用程序的一部分。

我打算使用React（或类似React的框架）来实现组件，因为它大概适合这种情况-它是同构的，可以很好地呈现局部。

问题是像

<gallery image-ids="[1, 3]"/>

应该成为

<Gallery imageIds={[1, 3]}/>

JSX / TSX组件有时会出现，我不确定执行此操作的正确方法，但是我希望它是常见的任务。

如何在React中解决这种情况？

Answer 1

可以通过将html字符串解析并将生成的节点转换为React元素，将经过处理的HTML转换为可在服务器和客户端上运行的React组件。

const React = require('react');
const ReactDOMServer = require('react-dom/server');

const str = `<div>divContent<p> para 1</p><p> para 2</p><gallery image-ids="" /><player video-id="" /><p> para 3</p><gallery image-ids="[1, 3]"/></div>`;


var parse = require('xml-parser');

const Gallery = () => React.createElement('div', null, 'Gallery comp');
const Player = () => React.createElement('div', null, 'Player comp');

const componentMap = {
  gallery: Gallery,
  player: Player
};


const traverse = (cur, props) => {
  return React.createElement(
    componentMap[cur.name] || cur.name,
    props,
    cur.children.length === 0 ? cur.content: Array.prototype.map.call(cur.children, (c, i) => traverse(c, { key: i }))
  );
};

const domTree = parse(str).root;
const App = traverse(
   domTree
);

console.log(
  ReactDOMServer.renderToString(
    App
  )
);

但是请注意，您并不是真正需要的JSX / TSX，而是React渲染器的React
Nodes树（在这种情况下为ReactDOM）。JSX只是语法糖，除非您想在代码库中维护React输出，否则不需要来回转换它。

请原谅过度简化的html解析。它仅用于说明目的。您可能想使用符合规范的库来解析输入的html或适合您的用例的内容。

确保客户端捆绑软件获得完全相同的App组件，否则您可能会因为React的客户端脚本重新创建DOM树而失去服务器渲染的所有好处。

您也可以通过上述方法利用React 16的流式传输。

解决道具问题

道具将从树中作为属性提供给您，并且可以作为道具传递（在仔细考虑课程用例的情况下）。

const React = require('react');
const ReactDOMServer = require('react-dom/server');

const str = `<div>divContent<p> para 1</p><p> para 2</p><gallery image-ids="" /><player video-id="" /><p> para 3</p><gallery image-ids="[1, 3]"/></div>`;


var parse = require('xml-parser');

const Gallery = props => React.createElement('div', null, `Gallery comp: Props ${JSON.stringify(props)}`);
const Player = () => React.createElement('div', null, 'Player comp');

const componentMap = {
  gallery: Gallery,
  player: Player
};

const attrsToProps = attributes => {
  return Object.keys(attributes).reduce((acc, k) => {

    let val;
    try {
      val = JSON.parse(attributes[k])
    } catch(e) {
      val = null;
    }

    return Object.assign(
      {},
      acc,
      { [ k.replace(/\-/g, '') ]: val }
    );
  }, {});
};


const traverse = (cur, props) => {

  const propsFromAttrs = attrsToProps(cur.attributes);
  const childrenNodes = Array.prototype.map.call(cur.children, (c, i) => {

    return traverse(
      c,
      Object.assign(
        {},
        {
          key: i
        }
      )
    );
  });

  return React.createElement(
    componentMap[cur.name] || cur.name,
      Object.assign(
        {},
        props,
        propsFromAttrs
      ),
    cur.children.length === 0 ? cur.content: childrenNodes
  );
};

const domTree = parse(str).root;
const App = traverse(
  domTree
);

console.log(
  ReactDOMServer.renderToString(
    App
  )
);

但是请谨慎使用自定义属性-
您可能要遵循此rfc。如果可能，请坚持使用camelCase。