Eslint Выдает ошибку: не определять компоненты во время рендеринга
Я пытаюсь отобразить значки в панели навигации, но eslint выдает ошибку: не определять компоненты во время рендеринга.
Не определяйте компоненты во время рендеринга. React будет видеть новый тип компонента при каждом рендеринге и уничтожать узлы и состояние DOM всего поддерева (https://reactjs.org/docs/reconciliation.html#elements-of- Different-types). Вместо этого переместите определение этого компонента из родительского компонента «DrawerLayout» и передайте данные в качестве реквизита. Если вы хотите разрешить создание компонентов в реквизитах, установите для параметраallowAsProps значение true.eslintreact/no-unstable-nested-comments.
<Drawer
drawerContent = {CustomDrawerContent}
screenOptions = {{
headerStyle: {
backgroundColor: '#171630',
},
headerTintColor: '#fff',
drawerHideStatusBarOnOpen: true,
drawerActiveBackgroundColor: '#171630',
drawerActiveTintColor: '#fff',
drawerLabelStyle: { marginLeft: -20 },
headerRight: () => <HeaderRight onLogout = {onLogout} />, // at this line I am getting above error by eslint
}}
>
Я много пытался решить эту проблему, но у меня получилось только то, что я могу отключить eslint, как правило. Но я хочу знать, почему он выдает ошибку. можно ли обойтись без отключения eslint?
Ответы 1
Я узнал ответ, я создаю отдельный служебный файл и там переопределяю компонент следующим образом.
export const HeaderRight = (action, lib, icon, size, color) => (
<View style = {{ marginLeft: 15, marginRight: 15 }}>
<TouchableOpacity onPress = {action}>{IconComponent(lib, icon, size, color)}</TouchableOpacity>
</View>
);
и для использования я использовал функцию вместо компонента
HeaderLeft(action, 'FontAwesome', 'star', 20, 'red');