如何在 JSX 中添加函数？

Posted 2023-02-22

【中文标题】如何在 JSX 中添加函数？

【英文标题】：How to add function in JSX?

【发布时间】：2020-03-28 00:41:31

【问题描述】：

如何在 React 中添加 javascript 函数，这可能吗？我得到'函数无效'....

//Main component 
function Main () 

const vanilla_JS = function()  console.log('testing')

 return (
  <main>
   <div>vanilla_JS</div>
  </main>

 )


ReactDOM.render(<Main />, document.getElementById('root');

【问题讨论】：

您是否尝试在 <div> 中编写 javascript 函数？

这会有帮助吗？ ***.com/a/48443166/4636715

为什么需要在 JSX 和 html 标签中调用函数？请解释一下这个用例...

【参考方案1】：

1) ReactDOM 行缺少右括号：

ReactDOM.render(<Main />, document.getElementById('root'));

2) 您需要调用该函数才能使其工作

vanilla_JS()

在这个工作示例中，我没有登录到控制台，而是返回一个字符串：

function Main() 

  const vanilla_JS = function()  return 'testing'; 

   return (
    <main>
      <div>vanilla_JS()</div>
    </main>
   );



ReactDOM.render(<Main />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>