如何在反應中解決無法設置 null 的屬性（設置“內部 HTML”）？

Question

import React, { useState } from "react";
export default function DropDown() {
  
const fun=()=>{
document.getElementById('id').innerHTML='Hello world'
}
  return (
    <>
    <button onClick={fun()}>click</button>
      <p id="id"></p>
    </>
  );
}

如何解決反應中的錯誤？ 不在 JavaScript 中。 如果我們不使用內部 HTML 而不是在那個領域使用什么？

Answer 1

您的直接問題是您立即調用fun然后將其返回值（ undefined ）分配給onClick 。

go 關於這個你正在嘗試的方式，你需要分配 function 本身。

onClick={fun}

---

然而，直接的 DOM 操作與 React 設計的工作方式背道而馳。

如果有任何事情觸發重新渲染，您的更改可能會被清除。

React 被設計為數據驅動的。 要更改 DOM，您應該更改數據並讓 React 將其拉入 DOM 本身。

您應該使用state來跟蹤數據。

export default function DropDown() {
  const [open, setOpen] = useState(false);
  const fun = useCallback(() => setOpen(open => !open), []);
  return (
    <>
    <button onClick={fun}>click</button>
    {open && (<p>Hello, world</p>)
    </>
  );
}

Answer 2

在 React 中，使用 State Hook

https://reactjs.org/docs/hooks-state.html

你的代碼應該是

import React, { useState } from "react";
export default function DropDown() {
  
  const [greeting, setGreeting] = useState('Hello world');
  const onChange = () => {
    setGreeting('New greeting')
  }

  return (
    <>
    <button onClick={onChange}>click</button>
      <p id="id">{greeting}</p>
    </>
  );
}

Answer 3

這是因為您正在調用fun的 function 而不是將其綁定到點擊。

它應該是： <button onClick={fun}>click</button>

請參閱此CodeSandbox

Answer 4

import React, { useState } from "react";
export default function DropDown() {
 const [text,setText] useState('');

const fun=()=>{
  setText('Hello world')
}
  return (
    <>
    <button onClick={fun}>click</button>
      <p id="id">{text}</p>
    </>
  );
}

使用 state。 不推薦使用innerHTML。 https://reactjs.org/docs/dom-elements.html

Answer 5

這不是你在 React 中做類似事情的方式。 在大多數情況下，如果您在 React 中工作並發現自己在操作 DOM ( document.getElementById('id').innerHTML )，那么您可能是以“錯誤”的方式進行操作，您應該仔細檢查您的工作。

在這種情況下，你應該有類似的東西：

import React, { useState } from 'react'

export default function DropDown() {
  const [content, setContent] = useState();
  const fun = () => {
    setContent('Hello World!')
  }
  
  return (
    <>
      <button onClick={fun}>click</button>
      <p>{content}</p>
    </>
  );
}