You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native中在react-native-collapsible/Accordion内导入并使用自定义组件报错:TypeError: renderHeader is not a function

TypeError: renderHeader is not a function when using connected component with react-native-collapsible/Accordion

Let's break down exactly what's going wrong here:

The root cause is a mismatch between how you're exporting your component and how you're importing it.

Your component file uses export default to export the connected version of _renderADHeader:

export default connect(mapStateToProps, mapDispatchToProps)(_renderADHeader);

But in your main file, you're using named import syntax (with curly braces) to pull it in:

import {_renderADHeader} from './sections/address/headerBar/index';

Named imports only work if you've explicitly exported the value with a export statement (not export default). Since you used default export, the named import will resolve to undefined—which is why the Accordion component throws an error saying renderHeader is not a function.

Fixes you can apply:

1. Use default import (simplest solution)

Change your import line to remove the curly braces, since you're importing the default export:

import _renderADHeader from './sections/address/headerBar/index';

Then you can pass it to Accordion exactly as you were trying before:

<Accordion renderHeader={_renderADHeader} />

2. Switch to named export (if you prefer this pattern)

If you want to use named imports, update your component file to export the connected component as a named export instead of (or in addition to) the default:

// Wrap the connected component in a variable first
const ConnectedADHeader = connect(mapStateToProps, mapDispatchToProps)(_renderADHeader);

// Export as a named export
export { ConnectedADHeader as _renderADHeader };

// Optional: keep the default export if other files are using it
export default ConnectedADHeader;

Then your original named import will work correctly.

Also, a quick note about the this._renderHeader attempt: since you're working with functional components, this doesn't have the same context as class components—so that approach wasn't going to work anyway. Once you fix the import issue, passing the function directly will do the trick.

内容的提问来源于stack exchange,提问作者pratteek shaurya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.29 05:07:53