如何使flatelist成为可重用组件

Question

我想让我的flatlist可重复使用，但在传递道具时遇到了一些困难。

可重复使用组件的代码

const ListItemView = function (props) {
console.log(props);
return (
<View>
<FlatList
//data={props.data}
keyExtractor={props.keyp}
renderItem={props.disptext}
/>
</View>
);
};

当我在道具上运行console.log时，我会得到这个

{"disptext"：未定义，"keyp"：[函数匿名]}

这就是我从主屏幕传递道具的方式

const keyf = () => {
console.log('keyf');
//for the key extractor
return (item => item.index);
};
const rendertext = () => {
console.log('rendertext');
//for rerender function of the flatlist
({ item }) => {
return (
<View>
<Text>holaa</Text>
<Text>{item.name}</Text>
</View>
);
}
};
return (
<View style={style.container}>
<ListItemView
//data={con}
keyp={keyf()}
disptext={rendertext()}
/>
</View>
);
};

请帮助

Answer 1

您直接调用函数，但只需要给出它的引用……这样它就只能在某些事件上调用。应该是这样的：

<ListItemView
//data={con}
keyp={keyf}
disptext={rendertext}
/>

或

<ListItemView
//data={con}
keyp={()=>keyf()}
disptext={()=>rendertext()}
/>