document.createElement('div') 和 React.createElement('div') 有什么区别？答案

【问题标题】：What is the difference between document.createElement('div') and React.createElement('div')?document.createElement('div') 和 React.createElement('div') 有什么区别？
【发布时间】：2020-03-18 12:23:15
【问题描述】：

str = "<p> this is paragraph </p>"

上面的 str 可以由 HTML 的任何元素组成。所以为了让他发短信，我在我的反应应用程序中使用了下面的code。

let descriptionDiv = document.createElement('div');
descriptionDiv.innerHTML = description;
description = descriptionDiv.textContent || descriptionDiv.innerText;

在这种情况下我需要使用 ReactDOM 吗？

点赞：React.createElement('div');

但是不知道什么时候用？直接访问dom安全吗？

【问题讨论】：

我不明白你的最终愿望，但我想你可以用 React 完成所有这些事情，而无需像这样到达 DOM。
我有一个包含 HTML 标签的字符串。我需要从中阅读文本。我尝试使用正则表达式，但有时文本不可读。这就是我这样做的原因？这不是推荐的方法吗？
可能是这样的？ stackoverflow.com/questions/39758136/…

标签： html reactjs dom

【解决方案1】：

JSX 元素将被转译为 React.createElement() 函数以创建 React 元素，这些元素将用于 UI 的对象表示在 html 中，它只是为 dom 创建另一个节点。

如果你想在使用 react 的同时访问 dom，你可以使用 ref

要访问 DOM，请使用 react 元素传递一个 ref，然后使用 findDOMNode 方法访问它

直接使用 dom api 是完全安全的，但这取决于你的要求......简单或者你有一些复杂的任务，最好在 react 中使用 ref

例子

import ReactDOM from 'react-dom';

...  

let reactElement = ReactDOM.findDOMNode(this.refs.refName)

...  

<Component ref='refName'/>

【讨论】：

【解决方案2】：

React.createElement

React.createElement(
    "button",
          {
            className: "panel-btn-open"
          },
    "Open"
),

document.createElement

 const buttonOpen = document.createElement('button');
 buttonOpen.classList.add('panel-btn-open');
 buttonOpen.textContent = 'Open';

【讨论】：