时间戳

首页 > 解决方案 > 您如何更新您的项目以使用最新版本的 javascript？

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

问题描述

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

Button.js:18 Uncaught TypeError: props.onClick 不是函数

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

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

标签： javascriptreactjsfrontend

解决方案

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

possiblyUndefinedObject?.possiblyUndefinedFunction?.()

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

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

此外，请务必在支持它的浏览器中执行此操作（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
}

推荐阅读