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

【问题标题】：Prop spreading in react navigation <drawerItems>在反应导航 <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)

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

【问题讨论】：

标签： typescript react-native react-navigation

【解决方案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 规则在这里帮助了我。