如何修复“eslint-disable-next-line React/no-unstable-nested-components”

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”外部声明此组件或将其记忆化。如果你想允许在 props 中创建组件，请将 allowedAsProps 选项设置为 true.eslintreact/no-unstable-nested-components

错误图像：在此处输入图像描述

请问我可以知道如何修复上述错误吗？

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 = useCallback(() => (
    <MaterialCommunityIcons
        name="home-outline"
        size={50}
        color={theme.colors.text}
      />
  ), [theme.colors.text])

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

解释

前

ArrowDownIconComponent每当状态更改时都会重新声明并重新渲染

后

ArrowDownIconComponent仅声明一次（或仅在theme.colors.text更改时重新声明），因此会提高一些性能。