如何在Next JS中指定函数

ulmd4ohb  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(87)

我需要在NextJS项目中指定一个将由本机代码(Android/iOS应用程序)调用的函数,并调用将调用本机代码的函数
我想把它添加到整个项目中,这样那些函数就可以在任何时候被调用。
我有一个截取的工作代码

<html>
<head></head>
<body>

<script>
    var counter = 1;
    function buttonClicked(e) {     
        invokeCSharpAction(counter++);
    }

    function nativeDemand(data) {
         var el = document.getElementById('webtext');
         el.innerHTML = data;
        return 'test'
    }

</script>

<button onclick='javascript:buttonClicked(event)'>Click Me!</button>
<div id='webtext' style='font-family: script'><b>This web text will change when you push the native button.</b></div>
</div>
</html>
"

字符串
然而,我无法在下一个项目中包含这些函数,因为如果我将它们添加到页面中,它们不会被识别为应用程序的函数。此外,由于invokeCShrpAction函数没有在任何地方声明(本机应用程序将拾取它,所以我不需要声明它),构建失败
我试图在public/static/文件夹中创建一个脚本项目,并将这些功能添加到页面中,但它不起作用。
我是新的NextJs,任何提示,或方向将不胜感激

pobjuy32

pobjuy321#

您可以在body标签中添加一个script标签,并设置innerHTML,如下所示:

<script type="text/javascript" dangerouslySetInnerHTML={{ __html: "function buttonClicked(e) { invokeCSharpAction(counter++); }"}}>
            </script>

字符串
您可以在__html属性中添加任何JavaScript代码,在构建过程中应该忽略它,并在下一个应用中设置为vanilla JS。

相关问题