在反应中获取 [object Object] 而不是我的 jsx 元素答案

【问题标题】：getting [object Object] instead of my jsx element in react在反应中获取 [object Object] 而不是我的 jsx 元素
【发布时间】：2022-02-21 20:06:57
【问题描述】：

我想在第一次挂载时将段落元素添加到我的 div 元素中。但是在浏览器上，我看到了 [object Object]。另外，我想知道为什么我在浏览器上得到 [object Object] 而不是文本 'hi' 。对“hi”文本而不是 [object Object] 进行哪些更改。

import './App.css';
import {useEffect,useState} from  'react'

function App() {

  let h=(<p>hi</p>);
  useEffect(()=>{
   document.getElementById('i').append(h)
  },[])
  return (
    <div id='i' className="App">
     
 
    </div>
  );
}

export default App;

【问题讨论】：

标签： reactjs react-hooks jsx

【解决方案1】：

除非没有其他选择，否则永远不要在 React 中使用原生 DOM 方法。

在这里，您应该将 <p> 插入到返回的 JSX 中。使用布尔状态指示初始挂载是否已完成。

const { useEffect, useState} = React;

function App() {
  const [mounted, setMounted] = useState(false);
  useEffect(()=>{
    setMounted(true);
  },[])
  return (
    <div id='i' className="App">
     {
       mounted && <p>hi</p>
     }
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

【讨论】：

但是为什么我得到 [object Object] ??
因为您将标准 DOM 方法与 React 混合使用，这是您不应该做的。 .innerHTML 只接受一个 HTML 字符串 - 但你的 p 变量是一个 JSX 元素 - 一个对象 - 当强制转换为字符串时，它是 [object Object]。

【解决方案2】：

你得到 [object][object] 因为你在 h 中传递对象。

您可以更改以下代码以获得所需的输出，

let h='<p>hi</p>)';

document.getElementById("i").innerHTML += h

完整代码如下，

//import './App.css';
import React, {useEffect,useState} from  'react'

function App() {

  let h='<p>hi</p>)';
useEffect(()=>{
 document.getElementById("i").innerHTML +=  h
},[])
  return (
    <div id='i' className="App">
     
 
    </div>
  );
}

export default App;

【讨论】：