使用 ES10 的可选操作符（Optional Chaining）简化 React 中的条件渲染-JavaScript中文网-JavaScript教程资源分享门户

在 React 中，我们经常需要进行条件渲染以决定组件的展现或行为。然而，在处理深层次的嵌套属性时，条件渲染变得相当繁琐。幸运的是，在 ES10 中引入了可选操作符（Optional Chaining）这个新特性，它能够简化我们的条件渲染代码，让我们看看具体如何做到吧。

可选操作符简介

在 ES10 之前，我们只能通过繁琐的条件判断来处理深层次的嵌套属性，例如：

const name = user && user.info && user.info.name

用可选操作符，可以将这种冗长的代码简化为：

const name = user?.info?.name

这样的代码非常优雅，可读性也很高。

可选操作符的语法是 ?.，它表示如果左侧操作数存在，则执行右侧属性访问操作。如果左侧操作数为 null 或 undefined，则返回 undefined。

在 React 中，我们可以将可选操作符用于许多地方，例如条件渲染，事件处理等。

在进行条件渲染时，我们通常会使用 && 运算符，例如：

{user && user.info && (
  <div>
    <p>{user.info.name}</p>
    <p>{user.info.email}</p>
  </div>
)}

如果使用可选操作符，就可以将代码简化为：

{
  user?.info && (
    <div>
      <p>{user.info.name}</p>
      <p>{user.info.email}</p>
    </div>
  )
}

这样的代码更加简洁，易读性也更高。

在 React 中，我们经常会定义事件处理函数来响应用户操作。但是，当我们需要读取嵌套属性时，就需要使用大量的条件判断。例如：

handleClick(event) {
  if(event && event.target && event.target.value) {
    this.setState({value: event.target.value})
  }
}

如果使用可选操作符，就可以将代码简化为：

handleClick(event) {
  const value = event?.target?.value
  if(value) {
    this.setState({value})
  }
}

这样的代码更加简洁，易读性也更高。

虽然可选操作符非常方便，但也存在一些需要注意的地方。

可选操作符只适用于 ES10 及以上版本的 JavaScript，如果需要在老版本的浏览器中使用，需要使用编译器将代码转换为 ES5 或 ES6 的语法。

可选操作符 ?. 只适用于属性访问，不能用于函数调用。如果我们需要调用嵌套的函数，还需要进行条件判断。

可选操作符是一项非常实用的新特性，可以帮助我们简化复杂的条件渲染和事件处理等代码，同时还能提高代码的可读性和可维护性。如果你正在开发 React 应用，并且还没有尝试过可选操作符，那就赶快试试吧，你会发现它能帮助你更高效地开发应用。

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