无法在 React 中编写脚本

Question

所以，我正在用 react&remi.js 制作一个网站，一切都已设置好并准备好做一件事，我不能在 .jsx 中使用 javascript 函数和东西文件有人知道吗？

我试图将脚本从“return”中取出，但它没有得到函数名称，什么也没做，我是这样做的..

export default function Index() {
  return (
    <div>
      <div id="myNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
      </div>

      <h2>testing the nav</h2>
      <span className="spanText" onclick={openNav}>&#9776; open</span>
    </div>

  );
  function openNav() {
    document.getElementById("myNav").style.width = "100%";
  }

  function closeNav() {
    document.getElementById("myNav").style.width = "0%";
  }
}

Answer 1

你绝对可以在 JSX 文件中使用 javascript。加上onclick点击事件

应该是onClick

export default function Index() {
  const closeNav = () => { /... };

  return (
    <div className="closebtn" onClick="closeNav">&times;</div>
  )
}

Answer 2

补充 Tomas 所说的话：

在反应元素中，它应该是className=，而不是class=
在 React 中，要调用函数，您应该使用 onClick={/* your code */}，使用 {} 而不是 ""
此外，在声明元素时调用函数时要小心，而不是在事件发生时调用函数运行:

onClick={closeNav()}会在定义react元素时调用closeNav，然后在真正点击元素时抛出错误

onClick={closeNav} 在您单击元素之前不会调用该函数

onClick={() => closeNav()} 也可以

这是应用了所有这些更改的代码：

export default function Index() {
  return (
    <div>
      <div id="myNav" className="overlay">
        <a href="javascript:void(0)" className="closebtn" onClick={closeNav}>
          &times;
        </a>
        <div className="overlay-content">
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
      </div>

      <h2>testing the nav</h2>
      <span className="spanText" onClick={openNav}>
        &#9776; open
      </span>
    </div>
  );
  function openNav() {
    alert('open');
    document.getElementById('myNav').style.width = '100%';
  }

  function closeNav() {
    alert('close');
    document.getElementById('myNav').style.width = '0%';
  }
}

这是一个使用此代码的工作沙箱： https://codesandbox.io/s/react-scratchpad-forked-qtfb8x?file=/src/index.js

FWIW - 您运行遇到的问题都与 React 相关，混音不会导致这里的问题。

无法在 React 中编写脚本

Can’t write scripts in react

reactjs

remix.run