时间戳

首页 > 解决方案 > 在反应中使用容器的孩子作为孩子

reactjs - 在反应中使用容器的孩子作为孩子

问题描述

渲染组件时是否可以在 JSX 中使用 dom 元素作为子元素？我认为这解释了我正在尝试但无效的内容。

<div id="container">
 <div>node 1</div>
 <div>node 2</div>
</div>

const container = document.querySelector('#container');
ReactDOM.render(
  <MyComponent>{container.children}</MyComponent>,
  container
);

标签： reactjs

解决方案

是的，可以使用dangerouslySetInnerHTML，但不推荐。

从文档：

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 中设置 HTML，但是你必须输入 dangerouslySetInnerHTML 并传递一个带有 __html 键的对象，以提醒自己这是危险的。

const {useState, useEffect} = React;

function App(){
  const [html, setHtml] = useState('Loading...');
  useEffect(()=>{
    setHtml(document.querySelector('#container').innerHTML);
  }, []);
  
  return <div dangerouslySetInnerHTML={{__html: html}}/>;
}

ReactDOM.render(
  <App/>,
  document.querySelector('#app')
);
#container {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js"></script>
<div id='app'></div>

<div id="container">
  <div>node 1</div>
  <div>node 2</div>
</div>

希望这可以帮助！

推荐阅读