如何在 JSX 中添加函数？

【问题标题】：How to add function in JSX?如何在 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 函数？
这会有帮助吗？ stackoverflow.com/a/48443166/4636715
为什么需要在 JSX 和 HTML 标签中调用函数？请解释一下这个用例...

标签： javascript reactjs jsx

【解决方案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>

【讨论】：