Ошибка типа: this.props.header не является функцией

Question

Я пытаюсь использовать компонент @ercpereda/react-native-accordion пакета *1001* в моем проекте. Вот пример использования, который они дают в README:

const Header = ({ isOpen }) =>
<View style={{
  paddingTop: 15,
  paddingRight: 15,
  paddingLeft: 15,
  paddingBottom: 15,
  borderBottomWidth: 1,
  borderBottomColor: '#a9a9a9',
  backgroundColor: '#f9f9f9',
}}>
  <Text>{`${isOpen ? '-' : '+'} Click to Expand`}</Text>
</View>;

...
//inside render method

    <Accordion
      header={Header}
      content={Content}
      duration={300}
    />

и вот как я пытаюсь сделать Accordion:

            <View>
                {
                    headers.map((item, i) => (
                        <Accordion
                            header={ this.generateHeader(item) }
                            content = { <Text>Hello</Text> }
                        />
                    ))
                }
            </View>

с headers определяется так в моем методе рендеринга:

    const headers = [
        "Hotel",
        "Arriving Flight",
        "Departing Flight",
        "Restaurants",
        "Bars",
        "Things to Do"
    ];

и метод generateHeader примерно так:

generateHeader(item) {
    return (
        <Text>{ item }</Text>
    )
}

Несмотря на то, что generateHeader действительно является функцией, я продолжаю получать это сообщение об ошибке: TypeError: this.props.header is not a function (In 'this.props.header({ isOpen: this.state.is_visible })', 'this.props.header' is an instance of Object). Почему generateHeader не распознается как функция?

Answer 1

Вы правы. this.generateHeader - это функция. this.generateHeader(item) функция хотя? Нет, это не так.

this.generateHeader(item) возвращает <Text>{ item }</Text>, который не является функцией. Сравните это с примером, где Header - это функция, так что header={Header} говорит, что "опора header равна функции Header".

Если бы this.generateHeader(item) вернул () => <Text>{ item }</Text>, тогда это действительно была бы функция.

Вы также можете посмотреть на это так:

header={() => <Text />}

или как это:

const Header = () => <Text />
...
header={Header}
...

или как это:

const generateHeader = item => () => <Text>{item}</Text>
...
header={generateHeader(item)}
...