如何在反应中解决无法设置 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>
    </>
  );
}