使用 JSX 的 Reactjs 中的安全导航运算符答案

【问题标题】：Safe navigation operator in Reactjs using JSX使用 JSX 的 Reactjs 中的安全导航运算符
【发布时间】：2017-12-16 06:39:00
【问题描述】：

我正在通过 JSX 使用 Reactjs。在这种方法中是否有任何安全导航运算符可以使用？我尝试使用问号运算符，如“foo?.bar”，但出现语法错误。

【问题讨论】：

【解决方案1】：

安全导航操作员（又名猫王操作员）是proposal，处于 TC39 草案状态，所以没有。反正还没有（在撰写本文时）。

但是这种丑陋的语法会让你在没有库的情况下到达那里。而不是...

foo?.bar

...使用这个...

(foo||{}).bar||{}

它很难阅读，但它可以工作，并且不依赖于库。

更新：该提案已进入第 4 阶段，因此它将成为 ES2020 的一部分。

【讨论】：

【解决方案2】：

你可以使用lodash库中的get方法，像这样：

import { get } from 'lodash';

get(foo, 'bar1.bar2.bar3.bar4');

【讨论】：

【解决方案3】：

现在，有一个名为 @babel/plugin-proposal-optional-chaining 的 babel 插件可以解决这个问题。

【讨论】：