在React组件中渲染或使用DocumentFragment [英] Render or Use DocumentFragment in a React Component

问题描述

我在基于React的应用程序中要求渲染动态表单。表单定义存储为JSON文档，我已经有一个JS库，它解析定义并返回DocumentFragment。这个库也用在其他非React应用程序中，所以我无法改变它。

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

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

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

  #document-fragment 
 < fieldset id =metadata-form-908272class =metadata-form-rendition hide-pages> 
< div class =page-header-row> 
< div class =page-header-cell> 
< span> [未命名页面]< / span> 
< button class =page-header-button button icon> 
< span class =icon icon-arrow-up-11>< / span>< / button> 
< / div> 
< / div> 
< div class =page-areaid =metadata-form-page-001-area> 
< div class =question-row> 
< div class =question-label-cell mandatory>我已阅读并理解我的义务：< / div> 
< div class =question-input-cell> 
< div class =validation-message>< / div> 
< label>< input type =radiovalue =Yesname =metadata-form-908272-question-1> 
< span>是< / span>< / label> 
< label>< input type =radiovalue =Noname =metadata-form-908272-question-1> 
< span>否< / span>< / label> 
< / div> 
< / div> 
< div class =question-row> 
< div class =question-label-cell>请说明所提供信息的所有来源：< / div> 
< div class =question-input-cell> 
< div class =validation-message>< / div> 
< div class =formatted-editor> 
< div class =editor-areacontenteditable =true> 
< p>< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / fieldset> 
  

解决方案

更新：安全警报！

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

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

---

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

...我调用了ExternalLibrary.getFormFragment（{some_data}）......

导致 DocumentFragments 仅在内存中，也许您知道，我们需要附加片段首先是一个真正的DOM元素，所以让我们创建一个根元素来追加：

  let rootElement = document.createElement（div ）; 
 let frag = theExternalLibrary.getFormFragment（{some_data}）; 
 rootElement.appendChild（frag）; 
  

现在我们在这里有一个纯JavaScript元素DOM树。为了将其转换为React元素，以下是涉及提供反应的方法的方法：

I have a requirement in my React-based application to render dynamic forms. The form definitions are stored as JSON documents and I already have a JS library that parses the definitions and returns a DocumentFragment. This library is used in other non-React applications as well so I cannot change it.

To avoid re-writing the entire logic in my React application to parse the definitions and render the forms, I want to use the existing library.

My question is, what would be the best way to render the DocumentFragment in a React component?

Here is my DocumentFragment if I just output it to the console in my render() method.

#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>

解决方案

Update: Security Alert!

Thanks for reminding from @JaredSmith in comment, the method provided here really has secure issue. It's not proper to apply it if the library is not from your internal.

To learn more about the issue, you could look into the link of dangerouslysetinnerhtml I referred below.

---

Here is indeed a tricky way to achieve your goal. By the information you provided in comment:

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

cause that DocumentFragments only in memory, maybe as you know, we need to append the fragment to a real DOM element first, so let's just create a root element for appending:

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

Now we have a pure JavaScript elements DOM tree here. In order to convert it to React elements, here is the way which involves a method that react provides: dangerouslysetinnerhtml
You could see that this method is not encouraged to use by its scary name.

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 }} />;
}

Live example:

这篇关于在React组件中渲染或使用DocumentFragment的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！