如何修复‘eslint-禁用-下一行反应/无不稳定-嵌套-组件’

Question

我有以下的代码片段在我的反应-本机类型记录项目。

​

import React from 'react';
import { View, Text } from 'react-native';

import DropDownPicker from 'react-native-dropdown-picker';

const Dropdown = () =>{
  <DropDownPicker
    ArrowDownIconComponent={() => ( // this is the section I getting the error message
      <MaterialCommunityIcons
        name="home-outline"
        size={50}
        color={theme.colors.text}
      />
    )}
  />
}

​

由于es-lint，它提供了以下错误消息：

错误消息：

在父组件之外声明此组件为"DropDown“或回溯它。如果希望允许在道具中创建组件，请将true.eslintreact/no-unstable-nested-components选项设置为allowAsProps。

错误图像：在这里输入图像描述

我能知道如何修复上面的错误吗？

Answer 1

只需声明父组件之外的组件：

const ArrowDownIconComponent = () => (
  <MaterialCommunityIcons
    name="home-outline"
    size={50}
    color={theme.colors.text}
  />
);

const Dropdown = () =>{
  <DropDownPicker
    ArrowDownIconComponent={ArrowDownIconComponent}
  />
}

或者，如果theme是Dropdown组件的状态变量，那么将其回溯：

const Dropdown = () =>{

  const theme = useTheme();

  const ArrowDownIconComponent = useMemo(() => (
    <MaterialCommunityIcons
        name="home-outline"
        size={50}
        color={theme.colors.text}
      />
  ), [theme.colors.text])

  return (
    <DropDownPicker
      ArrowDownIconComponent={ArrowDownIconComponent}
    />
  );
}

解释

在此之前

每当状态更改时，都会重新声明和重新呈现ArrowDownIconComponent。

之后

ArrowDownIconComponent只声明一次(或者只有在更改theme.colors.text时才重新声明)，因此它将提高一些性能。

Answer 2

我是个菜鸟，不知道为什么，但useMemo没有为我工作。我不得不在我的例子中使用useCallback，它看起来像

const Dropdown = () =>{

  const theme = useTheme();

  const ArrowDownIconComponent = useCallback(() => (
    <MaterialCommunityIcons
        name="home-outline"
        size={50}
        color={theme.colors.text}
      />
  ), [theme.colors.text])

  return (
    <DropDownPicker
      ArrowDownIconComponent={ArrowDownIconComponent}
    />
  );
}