React js 中的事件处理

Question

const [show, setShow] = useState(true)
    const showDiv = () => {
        if (show) {
            document.getElementsByClassName("skills-hero")[0].style.display = "flex"

        }
        else if (!show) {
            document.getElementsByClassName("skills-hero")[0].style.display = "none"
        }
    }

这是一个简单的逻辑，但它不起作用，也没有给出任何错误。我只是不明白为什么它不起作用

Answer 1

你不能 select 带有 getElementsByClassName 的 jsx 元素，因为它们不在真正的 dom 中。你的真实 DOM 在 React 中是空的。

您可能想要进行条件渲染；

 show && <div className="skills-hero"></div>

像这样。

Answer 2

您的代码无法正常工作有两种可能：

skill-hero 元素在 'root' 元素内定义（您将在其中附加 Reactjs 应用程序。假设您将 React 应用程序附加到真实 DOM。因此该元素被 React 应用覆盖。
function showDiv 没有返回任何东西，如果你在 return(jsx) 函数中调用函数，我想反应会报错。

要使您的示例有效：

里面Index.html

  <div class="skills-hero">
    <div class="p">1</div>
    <div class="p">2</div>
  </div>
  <div id="root"></div>

里面Javascript

const MyFunc = () => {
  const [show, setShow] = React.useState(true);
  const showDiv = () => {
    if (show) {
      document.getElementsByClassName("skills-hero")[0].style.display = "flex";
    } else if (!show) {
      document.getElementsByClassName("skills-hero")[0].style.display = "none";
    }
    return "some dummy text";
  };
  return showDiv();
};

ReactDOM.render(<MyFunc />, document.getElementById("root"));

注意：这种方法不受欢迎。 ^^^

你应该避免在 ReactJs 中直接 DOM 操作，主要是因为：

性能
安全性（XSS）
和 ReactDOM 为您高效地进行 dom 操作。
它让生活变得更轻松
等...

    const [show, setShow] = useState(true);
    const showDiv = () => show ? <div className="skills-hero"> </div> : null

React js 中的事件处理

Event Handling in React js

event-handling

reactjs