如何在 react.js 中包含 javascript

Question

我正在构建一个 React.JS 网站，但我不完全确定如何在我的 html 中实现一段 JavaScript。在普通 HTML 中，您可以将脚本放在这些标签中：

<Script></Script>

但是使用 react.js

function App() {
  return (
    <div>
        <button onlick='log()'>Log</button>
        <script>
            Log() = Console.log('Hello')
        </Script>
    </div>
  );
}

export default App;

这样的事情是行不通的。 我怎么能以这种方式运行脚本？

Answer 1

试试这个

 function App() {
const log =()=> {console.log('Hello')}
  return (
    <div>
        <button onClick={()=>log()}>Log</button>
     
    </div>
  );
}

export default App;

更多信息：https://reactjs.org/docs/handling-events.html

Answer 2

请了解 React 的工作原理以及 events work specifically 的工作原理

一个基本的例子：

function App() {
  const log = () => console.log('Hello')

  return <button onClick={log}>Log</button>
}

export default App;

Answer 3

不需要使用脚本标签你可以把所有你想要的函数放在App函数中，然后再返回 请具体说明您需要做什么，以便我提供帮助

Answer 4

ReactJs Docs 将成为你的朋友，但基本上你可以在你的 return 语句之前在你的函数组件中运行你的 javascript 代码

这是一个codesandbox link 示例

Answer 5

这是一种更好的方法，但是除了我认为我可以在此答案中解释的内容之外，您还必须从问题中的代码中了解很多关于 React 的知识。您的代码有许多拼写错误，您可能实际上不需要使用 <script> 标记。

const logger = () => {
  console.log('hello')
}

function App() {
    return (
      <div>
          <button onClick={logger}>Log</button>
      </div>
    );
}

export default App;