javascript - TypeError : this. props.header 不是函数

Question

我正在尝试在我的项目中使用 @ercpereda/react-native-accordion 包的 Accordion 组件。以下是他们在自述文件中给出的示例用法:

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 不是一个函数 (In 'this.props.header) header({ isOpen: this.state.is_visible })', 'this.props.header' 是 Object 的一个实例)。为什么 generateHeader 不被识别为函数？

Answer 1

你是对的。 this.generateHeader 是一个函数。是this.generateHeader(item)一个函数？不，不是。

this.generateHeader(item)返回<Text>{ item }</Text>这不是一个函数。与 Header 的示例进行比较是一个函数，使得 header={Header}说“ Prop header等于函数Header”。

如果this.generateHeader(item)返回() => <Text>{ item }</Text> ，那么它确实是一个函数。

你也可以这样看:

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

或者像这样:

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

或者像这样:

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