在反应导航 <drawerItems> 中传播道具

Posted 2023-03-13

【中文标题】在反应导航 <drawerItems> 中传播道具

【英文标题】：Prop spreading in react navigation <drawerItems>

【发布时间】：2020-01-07 12:09:27

【问题描述】：

我在 typescript 中构建了一个 react native 应用程序。我正在使用来自反应导航的抽屉项目组件。

<DrawerItems
  ...this.props
  items=items
  itemStyle=styles.drawerItem
  labelStyle=material.body1
  activeBackgroundColor="transparent"
/>

出于学习目的，我将 lint 设置得非常严格。现在我收到以下错误消息：

propp 传播是禁止的(react/jsx-props-no-spreading)

我尝试过分开传递道具，但它需要其他我不知道从哪里获得的道具。谁能告诉我如何在不传播道具的情况下重写它？

【参考方案1】：

我想通了。我调试了道具并将所有孩子单独放入。 完成的代码如下所示：

            <DrawerNavigatorItems
              items=items
              itemStyle=styles.drawerItem
              labelStyle=material.body1Object
              activeBackgroundColor="transparent"
              drawerPosition="left"
              renderIcon=renderIcon
              getLabel=getLabel
              onItemPress=onItemPress
            />

请注意，我同时更新了我的包，所以 ...props 的原始子代可能会有所不同

【讨论】：

因此，您没有改进代码，而是降低了代码的可读性和对未来更新的鲁棒性。在没有更好的解决方案的情况下，这种情况下最好的解决方案可能是禁用此行的规则：/* eslint-disable-next-line react/jsx-props-no-spreading */

正如原始问题中所述，出于学习目的，我已将其设置为严格。我认为 linter 规则是事实，因为我还是 react-native 的初学者。可读性和健壮性不是这个项目的目标，它是为了理解 react-native。通过弄清楚这个道具传播问题，我学到了很多东西。 linter 规则在这里帮助了我。