时间戳

首页 > 解决方案 > 在反应组件中将感叹号作为道具值传递

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

问题描述

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

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

标签： reactjstypescriptecmascript-6

解决方案

组合：

  • 可选的链接运算符（?.、TypeScript 和 JavaScript），以及

  • 非断言运算符(TypeScript)（实际上它是一个非nullishnull运算符），它告诉 TypeScript 结果值不是nullor undefined。

该data?.list部分获取data.listif datais not nullor的值undefined，或者获取undefinedif data is null or的值undefined。然后!向 TypeScript 断言结果data?.list不是null或undefined（更多下文）。

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

我猜!是因为MyComponent不允许它的list道具是nullor undefined。如果是这样，代码应该只是：

<MyComponent list={data.list} />

...事先使用适当的逻辑来检查两者都不是，或者如果不是这样data，则根本避免渲染。例如，也许：data.listnullundefinedMyComponent

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

推荐阅读