reactjs 如何将HTMLElement转换为React元素？

nc1teljy 于 2023-05-28 发布在 React

关注(0)|答案(3)|浏览(336)

我正在开发一个React应用程序，它使用Vanilla JS中的外部库，使用document.createElement(...)创建DOM元素。其中一些数据我想插入到React元素中。如果我有一个简单的应用程序：

let sub = React.createElement('p', null, 'Made with React'),
    main = React.createElement('div', null, [sub])

React.render(main, document.getElementById('app'));

它呈现的内容为<p data-reactid=".0.0">Made with React</p>。如果我尝试使用document.createElement，则不会呈现任何内容。

let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', null, [sub])

React.render(main, document.getElementById('app'));

我目前找到了一个使用dangerouslySetInnerHTML的解决方法。

let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', {dangerouslySetInnerHTML: {__html: sub.outerHTML}});

React.render(main, document.getElementById('app'));

这会渲染，但似乎不安全。如何将HTMLElement追加为React子元素？

reactjs

来源：https://stackoverflow.com/questions/69185915/how-to-cast-an-htmlelement-to-a-react-element

3条答案

按热度按时间

ntjbwcob1#

下面是我发现的一个优雅简单的解决方案，使用refs将普通HTML元素包含到React项目中：

class Container extends React.Component {
  render() {
    return <div ref={ ref => ref.appendChild(this.props.child) }></div>;
  }
}

假设你有一个要显示的普通段落元素：

const para = document.createElement('p');
para.innerText = 'Hello world!';

只需像这样为它创建一个容器，以便与其他React元素一起呈现：

<Container child={ para }/>

赞(0）回复(0）举报 2023-05-28

vhmi4jdf2#

dangerouslySetInnerHTML可以安全地与HTML杀毒软件一起使用。许多库可用于防止XSS。
React.createElement()返回虚拟dom javascript对象，document.createElement()返回dom对象。我们使用javascript对象来管理diff和更新昂贵的dom，除非明确需要，否则我们不希望回退到dom元素。

赞(0）回复(0）举报 2023-05-28

ubby3x7f3#

我有一个类似的问题，我使用的是从另一个应用程序复制过来的Vanilla JS document.createElement()。

修复方法是使用React.createElement()。所以我从这个开始：

const courseFrame = document.createElement('div');
courseFrame.className = 'frame';
courseFrame.id = frameId;

对此：

const courseFrame = React.createElement(
    'div',
    { className:'frame', id: frameId, style: { backgroundColor: colorCode}},
    elements
);

其中elements是我想插入到这个div中的其他元素的数组，如这个问题here所示。这是因为像appendChild()这样的函数不存在于React元素中，所以你需要解决这个问题。

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 如何将HTMLElement转换为React元素？

3条答案

相关问题

热门标签

最新问答