在 React 中使用 ES11 新提供的 Optional Chaining 运算符

ES11（也称为 ES2020）是 JavaScript 的最新版本，其中引入了许多新特性，其中包括 Optional Chaining 运算符。这个运算符可以让我们更加简洁地处理对象的属性访问，尤其是在处理嵌套对象时。在 React 中，我们可以使用 Optional Chaining 运算符来写出更加优美的代码。

什么是 Optional Chaining 运算符

Optional Chaining 运算符（?.）是一个新的运算符，它可以在访问对象属性时避免出现 TypeError 错误。通常，我们需要使用 && 运算符来检查对象属性是否存在，例如：

if (obj && obj.prop && obj.prop.subprop) {
  // do something
}

这种写法非常繁琐，而 Optional Chaining 运算符可以让我们更加简洁地实现相同的功能：

if (obj?.prop?.subprop) {
  // do something
}

如果 obj、obj.prop 或 obj.prop.subprop 中的任意一个不存在，那么表达式的值就会是 undefined，而不是抛出 TypeError 错误。

在 React 中使用 Optional Chaining 运算符

在 React 中，我们经常需要访问嵌套对象的属性，例如：

const name = user && user.profile && user.profile.name;

这种写法非常繁琐，而且容易出错。使用 Optional Chaining 运算符，我们可以将其简化为：

const name = user?.profile?.name;

这样就可以避免出现 TypeError 错误，而且代码更加简洁。

另外，在 JSX 中，我们也可以使用 Optional Chaining 运算符，例如：

return (
  <div>
    {user?.profile?.name}
  </div>
);

这样就可以避免出现 undefined 的情况，而且代码更加清晰。

示例代码

下面是一个使用 Optional Chaining 运算符的示例代码：

-- -------------------- ---- -------
-------- ------------- ---- -- -
  ----- ---- - --------------------
  ----- ----- - ------------
  ----- ----- - ------------

  ------ -
    -----
      ---------------
      --------- -----------
      --------- -----------
    ------
  --
-

在这个代码中，我们使用了 Optional Chaining 运算符来访问 user 对象的属性，避免了出现 TypeError 错误。这样代码更加简洁，也更加易于阅读和维护。

总结

Optional Chaining 运算符是 ES11 中的一个新特性，它可以让我们更加简洁地处理对象的属性访问，尤其是在处理嵌套对象时。在 React 中，我们可以使用 Optional Chaining 运算符来写出更加优美的代码。使用 Optional Chaining 运算符可以避免出现 TypeError 错误，同时也可以让代码更加清晰和易于维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e523a51886fbafa40ded61