javascript - 在 React 组件中渲染或使用 DocumentFragment

Question

我的基于 React 的应用程序需要呈现动态表单。表单定义存储为 JSON 文档，我已经有一个 JS 库可以解析定义并返回一个 DocumentFragment。该库也在其他非 React 应用程序中使用，因此我无法更改它。

为了避免在我的 React 应用程序中重写整个逻辑来解析定义和呈现表单，我想使用现有的库。

我的问题是，在 React 组件中呈现 DocumentFragment 的最佳方式是什么？

这是我的 DocumentFragment，如果我只是在我的 render() 方法中将它输出到控制台。

#document-fragment
    <fieldset id="metadata-form-908272" class="metadata-form-rendition hide-pages">
      <div class="page-header-row">
        <div class="page-header-cell">
          <span>[Un-named page]</span>
          <button class="page-header-button button icon">
            <span class="icon icon-arrow-up-11"></span></button>
        </div>
      </div>
      <div class="page-area" id="metadata-form-page-001-area">
        <div class="question-row">
          <div class="question-label-cell mandatory">I have read and understood my obligations:</div>
          <div class="question-input-cell">
            <div class="validation-message"></div>
            <label><input type="radio" value="Yes" name="metadata-form-908272-question-1">
              <span>Yes</span></label>
            <label><input type="radio" value="No" name="metadata-form-908272-question-1">
              <span>No</span></label>
          </div>
        </div>
        <div class="question-row">
          <div class="question-label-cell">Please state all sources for the information provided:</div>
          <div class="question-input-cell">
            <div class="validation-message"></div>
            <div class="formatted-editor">
              <div class="editor-area" contenteditable="true">
                <p>​</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>

Answer 1

更新:安全警报!

感谢@JaredSmith在评论中的提醒，这里提供的方法确实有安全问题。如果库不是来自您的内部，则应用它是不合适的。

要了解有关此问题的更多信息，您可以查看我在下面提到的 dangerouslysetinnerhtml 的链接。

---

这确实是实现目标的一种棘手方法。根据您在评论中提供的信息:

... I call theExternalLibrary.getFormFragment({some_data}) ...

因为 DocumentFragments 仅在内存中，也许如您所知，我们需要先将片段附加到真正的 DOM 元素，所以让我们创建一个用于附加的根元素:

let rootElement = document.createElement("div");
let frag = theExternalLibrary.getFormFragment({some_data});
rootElement.appendChild(frag);

现在我们在这里有了一个纯 JavaScript 元素的 DOM 树。为了将其转换为 React 元素，这里是涉及 React 提供的方法的方式:dangerouslysetinnerhtml
你可以看到这个方法不鼓励使用它可怕的名字。

render() {
  let rootElement = document.createElement("div");
  let frag = theExternalLibrary.getFormFragment({some_data});
  rootElement.appendChild(frag);
  // rootElement.innerHTML is in string type.
  return <div dangerouslySetInnerHTML={{ __html: rootElement.innerHTML }} />;
}

实例: