您如何更新您的项目以使用最新版本的 javascript？

Question

我目前正在构建一个新的个人 React 项目，并希望利用并使用 javascript 中添加的一些最新功能，例如可选链。 我曾尝试在我的 index.html 文件中包含此脚本，但这不起作用。 在您的 React 项目中获得 javascript 的最新稳定版本的秘诀是什么？ *编辑：抱歉，我没有添加足够的信息，但我正在尝试 Reactjs 中的可选链接功能。 但是，当我运行此偶数处理程序时，它会出现以下错误消息：

Button.js:18 Uncaught TypeError: props.onClick 不是 function

这是真的，因为我想看看可选链接是如何工作的，但它显然在这里不起作用。

const eventHandler = (e) => {
        console.log(e.target.value);
        // other code
        // onClick is the function that is passed from the parent component
        props?.onClick(e);
    }

Answer 1

老实说，在我研究它之前，我并没有完全理解这种语法。 我不知道您可以将调用本身设为可选，并认为您只能针对属性而不是方法/函数来执行此操作。 但是，您可以。 您只需要调整使用可选链接的方式：将其写为：

possiblyUndefinedObject?.possiblyUndefinedFunction?.()

请参阅处理可选回调或事件处理程序

如果您使用带有解构赋值的 object 的回调或获取方法，您可能有不存在的值，除非您测试了它们的存在，否则您无法将其作为函数调用。 使用?. ，你可以避免这个额外的测试：

此外，请务必在支持它的浏览器中执行此操作（Firefox 68 不起作用，但 Chrome 84 可以）。

 const foo = {} // What you have try { foo?.bar(); } catch (err) { console.error(err); // TypeError: foo?.bar is not a function } // With?.() but undefined bar try { foo?.bar?.(); // Doesn't get called } catch (err) { console.error(err); // No error } foo.bar = () => console.log("bar"); // With?.() defined bar try { foo?.bar?.(); // "bar" } catch (err) { console.error(err); // No error }