Могу ли я использовать компонент в ItemSeparatorComponent в плоском списке?

Question

Я думал о том, как использовать ItemSeparatorComponent в плоский список

Это работает, если я использую:

import Seperator from '../Seperator';

        <FlatList
          ItemSeparatorComponent={() => <Seperator />}
          data={this.props.x}
          renderItem={({ item }) => this.renderX(item)}
        />

Могу ли я просто использовать <Seperator /> как следующее?

import Seperator from '../Seperator';

           <FlatList
              ItemSeparatorComponent={ <Seperator />}
              data={this.props.x}
              renderItem={({ item }) => this.renderX(item)}
            />

Это не работает! Зачем?

Answer 1

Если твой <Separator/> является компонентом без состояния без методов жизненного цикла, вы можете изменить их на функциональные компоненты, например:

import React from 'react'
import {View} from 'react-native'

const Separator= (props) =>
  <Text>{...}</Text>

export default Separator

При этом вам не нужен явный возврат. Если вы придерживаетесь компонентов класса (с состоянием, методами жизненного цикла или рендерингом...), вам нужно использовать функции стрелок (неявный возврат).

Answer 2

Причина () => <Separator /> работает и <Separator /> не потому что ItemSeparatorComponentожидает функцию, которая отображает элемент, а не сам элемент.

Это связано с тем, что компонент, который вы указываете в качестве разделителя, динамически отображается по мере заполнения списка, а не отображается на месте (что и является <Component /> синтаксис).

В вашем рабочем примере вы используете () => <Separator />. Если вы не используете компоненты класса, это излишне, поскольку все, что делает ваш код в этом случае, - это создание анонимной функции, которая затем отображает ваш компонент. При условии, что вы используете компонент функции без сохранения состояния (который можно было бы ожидать в качестве простого разделителя), вы можете просто написать его какItemSeparatorComponent={Separator}