axios 警告：validateDOMNesting(...)：不能< html>作为孩子出现，< div>

gev0vcfq  于 2023-10-18  发布在  iOS
关注(0)|答案(1)|浏览(200)

[Edit：我也尝试了使用错误的SetInnerHTML代码，解决了validateDOMNesting问题，但仍然没有交互性，我猜JavaScript代码被禁用或不工作]
所以我从后端获取一个文件，并在我的React应用程序中呈现它。我正在获取的文件是游戏文件，如井字游戏，石头剪刀布，等等，所有这些游戏都是用html和js构建的。问题是，当我渲染html文件时，处理程序不工作，例如在井字游戏中，我有处理点击的函数，在用户点击一个点后，它的innerHtml被设置为X或O，但这些处理程序不工作，并且发生错误：我在下面附上代码和截图

  1. default function RenderGame({ game }) {
  2.     return (
  3.         <>
  4.             <div>
  5.                 {ReactHtmlParser(game)}
  6.             </div>
  7.         </>
  8.     )
  9. }
  11. const PlayGame = ({ temp }) => {
  12.     const [game, setGame] = useState({})
  13.     const params = useParams()
  14.     const gameID = <params className="id"></params>
  16.     useQuery(`project-${gameID}`, async () => {
  17.         const resp = await axios.get(`${import.meta.env.VITE_API_URL}/projects/${gameID}/iframe`)
  18.         console.log(resp)
  19.         return resp.data
  20.     }, {
  21.         onSuccess: (data) => {
  22.             setGame(data)
  23.         }
  24.     })
  26.     const handleDestroy = (e) => {
  27.         e.preventDefault()
  28.         deleteGame.mutate()
  29.     }
  31.     return (
  32.         <RenderGame game={game}></RenderGame>
  33.     )
  34. }
  36. export default PlayGame;

游戏的代码如下：

  1. "<!-- app/views/projects/iframe.html.erb -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <!-- Add the base tag here only if there are image files -->
  7.   <base href="/uploads/image_folder_1693815923/">
  8.   
  9. </head>
  10. <body>
  11.   <!-- Render the HTML content -->
  12.   <div class="message-code">
  13.     <!DOCTYPE html>
  14. <html>
  15.     <head>
  16.         <style>
  17.             *{
  18.                 margin: 0;
  19.                 padding: 0;
  20.                 background-color: black
  21.             }        
  22.             .title{
  23.                 text-align: center;
  24.                 margin-bottom: 0px;
  25.                 color: #808080;
  26.                 font-style: italic;
  27.                 font-weight: bold;
  28.             }    
  29.             .gameContainer{ 
  30.                 display: flex;
  31.                 justify-content: center;
  32.                 padding-top: 20px;
  33.             }
  35.             .container{
  36.                 display: grid;
  37.                 grid-template-rows: repeat(3, 10vw);
  38.                 grid-template-columns: repeat(3, 10vw);
  39.                 position: relative;
  40.                 justify-content: center;            
  41.             }
  43.             .box{
  44.                 border: 2px solid #C0C0C0;
  45.                 font-size: 6vw;
  46.                 cursor: pointer;
  47.                 display: flex;
  48.                 justify-content: center;
  49.                 align-items: center;
  50.             }
  52.             .box:hover{
  53.                 background-color: #191919;
  54.             }
  56.             .info {
  57.                 font-size: 28px;
  58.                 color: #A0A0A0;
  59.                 text-align: center;
  60.                 font-style: italic;
  61.             }
  62.             .player {
  63.                 text-align: center;
  64.             }
  66.             .gameInfo{
  67.                 padding: 30px 34px;
  68.                 text-align: center;
  69.             }
  70.             .btn{
  71.                 margin-top: 4px;
  72.                 cursor: pointer;
  73.             }
  74.             .line{
  75.                 background-color: black;
  76.                 height: 3px;
  77.                 width: 0;
  78.                 position: absolute;
  79.                 background-color: #911d91;
  80.                 transition: width 0.3s ease-in-out;
  81.                 text-align:center;
  82.             }
  83.             .boxtext{
  84.                 color: white;
  85.                 background-color: transparent;
  86.             }
  88.         </style>
  89.     </head>
  91.     <body>
  92.         <h1 class="title">Welcome To Tic Tac Toe</h1>
  94.         <div class="player">
  95.         <span class="info">Turn for: X</span>
  96.         </div>
  98.         <div class="gameContainer">
  99.         <div class="container">
  100.             <div class="line"></div>
  101.             <div class="box border-top-0 border-left-0"><span class="boxtext"></span></div>
  102.             <div class="box border-top-0"><span class="boxtext"></span></div>
  103.             <div class="box border-top-0 border-right-0"><span class="boxtext"></span></div>
  104.             <div class="box border-left-0"><span class="boxtext"></span></div>
  105.             <div class="box"><span class="boxtext"></span></div>
  106.             <div class="box border-right-0"><span class="boxtext"></span></div>
  107.             <div class="box border-bottom-0 border-left-0"><span class="boxtext"></span></div>
  108.             <div class="box border-bottom-0"><span class="boxtext"></span></div>
  109.             <div class="box border-bottom-0 border-right-0"><span class="boxtext"></span></div>
  110.         </div>
  111.         </div>
  112.         <div class="gameInfo">
  113.         <button id="reset" class="btn btn-secondary btn-lg">Start New Game</button>
  114.         </div>
  116.         <script>
  118.             function initializetictactoe(){
  120.                 let turn = "X"
  121.                 let isgameover = false;
  123.                 const changeTurn = ()=>{
  124.                     return turn === "X"? "0": "X"
  125.                 }
  127.                 const checkWin = ()=>{
  128.                     let boxtext = document.getElementsByClassName('boxtext');
  129.                     let wins = [
  130.                         [0, 1, 2, 5, 5, 0],
  131.                         [3, 4, 5, 5, 15, 0],
  132.                         [6, 7, 8, 5, 25, 0],
  133.                         [0, 3, 6, -5, 15, 90],
  134.                         [1, 4, 7, 5, 15, 90],
  135.                         [2, 5, 8, 15, 15, 90],
  136.                         [0, 4, 8, 5, 15, 45],
  137.                         [2, 4, 6, 5, 15, 135],
  138.                     ]
  139.                     wins.forEach(e =>{
  140.                         if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){
  141.                             document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"
  142.                             isgameover = true
  143.                             document.querySelector(".line").style.transform = `translate(${e[3]+29}vw, ${e[4]}vw) rotate(${e[5]}deg)`
  144.                             document.querySelector(".line").style.width = "20vw";   
  145.                             setTimeout(function() {
  146.                                 if (confirm(turn+' Lose! Play Again?')) {
  147.                                 location.reload();
  148.                                 } else {
  149.                                 window.location.href = '<%= user_path(current_user.id) %>';
  150.                                 }
  151.                             }, 400);     
  152.                         }
  153.                     })
  154.                 }
  156.                 let boxes = document.getElementsByClassName("box");
  157.                 Array.from(boxes).forEach(element =>{
  158.                     let boxtext = element.querySelector('.boxtext');
  159.                     element.addEventListener('click', ()=>{
  160.                         if(boxtext.innerText === ''){
  161.                             boxtext.innerText = turn;
  162.                             turn = changeTurn();
  163.                             checkWin();
  164.                             if (!isgameover){
  165.                                 document.getElementsByClassName("info")[0].innerHTML = "Turn for<strong>: " + turn + "</strong>";
  166.                             } 
  167.                         }
  168.                     })
  169.                 })
  171.                 reset.addEventListener('click', ()=>{
  172.                     let boxtexts = document.querySelectorAll('.boxtext');
  173.                     Array.from(boxtexts).forEach(element => {
  174.                         element.innerText = ""
  175.                     });
  176.                     turn = "X"; 
  177.                     isgameover = false
  178.                     document.querySelector(".line").style.width = "0vw";
  179.                     document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
  180.                 })
  181.             }
  183.             initializetictactoe();
  184.             
  185.         </script>
  187.     </body>
  189.   </div>
  191. </body>
  192. </html>
  193. "

axios

1条答案

按热度按时间
guykilcj

guykilcj1#

我认为你可以再次尝试使用SetInnerHTML，但这一次，尝试使用srcdoc（而不是src）属性将游戏HTML放入<iframe>中。srcdoc属性让您指定要在<iframe>中显示的HTML。
下面是我做的一个CodePen演示用法（如果它一开始没有正确加载，用Ctrl+Shift+7重新加载代码。我不知道它为什么会这样做，但当我在桌面上尝试本地React项目中的代码时，它运行得很好）：https://codepen.io/SonicBoomNFA/pen/eYbbQLy
getGame()模拟检索游戏的HTML。它返回测试两个事件侦听器的普通HTML（一个使用onclick属性直接在黄色正方形上，另一个使用addEventListener()在<body>下面使用<script>标记）。我还对字符串调用sanitize()，它将游戏HTML中的所有双引号替换为&quot;，因为嵌套的双引号会破坏代码。
<iframe>上的onload属性调整iframe的大小以适应其内容（受此Adjust width and height of iframe to fit with content in it的启发）。

赞(0）分享  回复(0）举报  2023-10-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com