在反应组件中将感叹号作为道具值传递答案

【问题标题】：pass exclamation mark as prop value in react component在反应组件中将感叹号作为道具值传递
【发布时间】：2021-07-02 02:46:16
【问题描述】：

今天我看到这行代码，我很困惑它的作用，我知道 list 是一个对象数组，但 ! 是干什么用的？它对我以后如何处理 MyComponent 组件有什么影响？

<MyComponent list={data?.list!} />

【问题讨论】：

称为可选链。你可以在这里阅读：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。感叹号只是表示您知道该值存在，因此您将其转换为一个值而不是 undefined 或 null
@Norse 这不是一个愚蠢的举动吗？列表来自api，如果api返回undefined怎么办？
嗯，有时这是一个愚蠢的举动，但有时你知道价值就在那里，所以你必须这样做

标签： reactjs typescript ecmascript-6

【解决方案1】：

那个组合：

可选的链接运算符（?.、TypeScript 和 JavaScript），以及
non-null assertion operator (TypeScript)（实际上它是一个非nullish 运算符），它告诉 TypeScript 结果值不是null 或undefined。

如果data 不是null 或undefined，则data?.list 部分获得data.list 的值，或者如果data 或null，则获得undefined 或undefined。然后! 向 TypeScript 断言data?.list 的结果不是null 或undefined（更多下文）。

请注意，这段代码充其量只是有点混乱。使用可选链和非空断言是没有意义的，因为使用可选链的唯一原因是处理基（data）可能是null或@的情况987654341@ 并使用值undefined（而不是查找.list）如果是这样。继续断言它是非无效的是没有意义的。其中一个或另一个不应该存在。

我猜! 存在是因为MyComponent 不允许其list 属性为null 或undefined。如果是这样，代码应该是：

<MyComponent list={data.list} />

...事先使用适当的逻辑来检查data 和data.list 是否不是null 或undefined，或者如果不是这样，则根本避免渲染MyComponent。例如，也许：

{data?.list ? <MyComponent list={data.list} /> : null}

【讨论】：

是的，我宁愿在组件内做一次{data?.list ? <MyComponent list={data.list} /> : null} ，也不愿在组件内多次，非常有见地 TJ，谢谢！