reactjs - 如果条件为真，则在子组件中调用函数

Question

只有当某个变量为真时，我才想在子组件中调用函数。否则什么都不做

allowDeleteItem = false;

<ChildComponent
....
removeItemFn={ deleteFn } />

我试图在花括号内添加我的布尔变量并执行类似的条件，{ allowDeleteItem && deleteFn }但我有一个打字稿错误，我很难解决这个问题。

另一种方法是将布尔变量作为道具传递给子组件并在那里进行验证。这种情况我可以解决，但我正在寻找一种可能的“更清洁”的方式

标签： reactjstypescript

Answer 1

我的猜测是您可能收到的错误是因为您尝试有条件地将函数引用发送给子道具，可能是这样的removeItemFn={allowDeleteItem && deleteFn}？这可能是有问题的，因为如果不满足条件，您将发送一个“未定义”值，这可能会破坏可能依赖子道具中该值的逻辑。

我对您的项目了解不够，所以我将列出一种可能性：

你可以选择使用React Context API。. 如果deleteFn函数和allowDeleteItem布尔值从父组件传递到许多子组件，您可以通过创建上下文并将每个子组件设置为上下文使用者来避免将它们作为每个组件的道具传递。父级将充当上下文提供者。这样，在子组件中，您只需调用 useContext() 挂钩即可访问这些值。

allowDeleteItem否则，将布尔值作为另一个道具发送会更容易。尽管一开始它可能看起来并不干净，但稍后您可能会发现这是最简单的方法，或者还有另一种压缩代码的方法。根据我的经验，最好先让功能正常工作，然后再清理代码。