将网页转换为 ReactJS ~ 无法编译“意外使用‘事件’ no-restricted-globals”

Question

我有一些 JS 代码需要与 React Web 兼容。
我会很感激一些帮助，因为我对我需要做的事情有点困惑。

当我进行以下更改时，出现编译失败错误。

目前 onclick 函数看起来像这样

    <a href="javascript:void(0)" onClick="openMenu(event, &#39;Starter&#39;);">
    <div className="w3-col s4 tablink w3-padding-large w3-hover-red">Starter</div></a>

然后我将 onClick 函数修改为此，试图让它工作

``` <a href="javascript:void(0)" onClick={(openMenu) => event, 'Pasta'}>
    <div class="w3-col s4 tablink w3-padding-large w3-hover-red">Salads</div> </a>

JS 函数如下所示：

    function openMenu(evt, menuName) {

            var i, x, tablinks;
            x = document.getElementsByClassName("menu");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < x.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
            }
            document.getElementById(menuName).style.display = "block";
            evt.currentTarget.firstElementChild.className += " w3-red";

        }
    document.getElementById("myLink").click();

如果我不做任何更改，该功能将不起作用，我的目标是让该功能与 React Web 一起使用。

您的帮助将不胜感激。

Answer 1

澄清一下，您的意思是第一个框中的代码不起作用，当您尝试将其更改为第二个示例时，您会收到有关 no-restricted-globals 的错误消息？

这是因为您使用的是“保留”关键字（事件）。 因此，当您将其从第一个中的 HTML 更改为 javascript 评估时，编译器拒绝编译。 这是为了防止全局关键字的错位。

第二个例子你就快到了：

<a href="javascript:void(0)" onClick={(openMenu) => event, 'Pasta'}>

目前你在parens（openMenu）中有函数名称，这不是你的意思。 parens 采用您要调用函数的参数。

就像是

<a href="javascript:void(0)" onClick={(event) => openMenu(event, 'Pasta')}>

应该管用。 我做的关键事情是改变你调用函数的方式。 如果您对箭头函数有更多疑问，React 文档可能会有所帮助。 习惯新的 ES6 语法只需要一段时间。

解决这个问题的另一种方法是使用函数柯里化：

<a href="javascript:void(0)" onClick={openMenu('Pasta')}>

那么该函数可以重写为：

   const openMenu = (menuName) => event => {   ...           
        event.currentTarget.firstElementChild.className += " w3-red";

所提供的任何一种方法都可以为您解决问题（以及许多其他方法）。