如何在 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');
【问题讨论】:
您是否尝试在<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>
【讨论】:
以上是关于如何在 JSX 中添加函数?的主要内容,如果未能解决你的问题,请参考以下文章
在 React 中,如何将 JSX 与返回更多 JSX 的 JS 函数一起返回?