如何在 JSX 中添加函数?

Posted

技术标签:

【中文标题】如何在 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');

【问题讨论】:

您是否尝试在 &lt;div&gt; 中编写 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>

【讨论】:

以上是关于如何在 JSX 中添加函数?的主要内容,如果未能解决你的问题,请参考以下文章

在 React 中,如何将 JSX 与返回更多 JSX 的 JS 函数一起返回?

如何在 JSX 中添加可见的 HTML 注释?

如何在 React JSX 中添加空格

如何在没有 JSX 的元素中添加自定义属性(仅使用 createElement 方法)?

如何在 JSX 的三元运算符中调用两个函数?

如何使用带有条件包装的 map() 函数在 JSX 中呈现数组条目