所以我从第一个组件导航到 FooItems 页面，并将 props 传递给导航。
showFooItemsPage = () => {
this.props.navigation.navigate('FooItemsComponent', {
fooItems: this.props.fooItems});
};
在我的 FooItemsComponents 上，我有一个带有 renderItems 函数的 Flatlist，并且它正在工作。但是，我想对 Flatlist 项目列表进行更改，然后我想单击 Flatlist 组件标题中的“保存”。
我现在遇到的主要问题是将 Prop 发送到我的 Flatlist 的标题组件。 Prop 未定义，我不知道如何从我的 FooItemsComponent 或当我在页面之间导航时向其发送 Prop ？
这是我的 FooItemsComponent 的一些片段:
class Header extends Component {
constructor(props) {
super(props);
}
async componentDidMount() {
//call some reducer action
}
save = items => {
this.props.saveItems(items);
this.props.navigation.navigate("previousComponent");
}
render() {
const {navigation, loading } = this.props;
return (
<View>
<View style={styles.header}>
<TouchableOpacity onPress={this.save}>
<Text style={styles.saveText}>Save</Text>
</TouchableOpacity>
</View>
<View
style={{
borderTopWidth: 1,
borderTopColor: Colors.grey,
height: 1,
}}>
</View>
</View>
);
}
}
export class FooItemsComponent extends Component {
constructor(props) {
super(props);
}
async componentDidMount() {
//some reducer action
}
renderItem = item => {
if (item.load) {
return <ActivityIndicator color={Colors.activityColor} size="small" />;
} else {
return (
<View>
<FooItems
{...item}
navigation={this.props.navigation}
showParticularItems={true}
/>
</View>
); }
};
render() {
const { fooItems, navigation, loading, props} = this.props;
if (!fooItems) fooItems = [];
return (
<View style={styles.container}>
<FlatList
keyExtractor={(item, index) => `key-${index}`}
data={fooItems}
renderItem={item => this.renderItem(fooItems.item)}
ItemSeparatorComponent={Separator}
ListHeaderComponent={Header}
ListFooterComponent={loading ? LoadingFooter : Separator}
/>
</View>
);
}
}
最佳答案
将您的组件作为 React 元素传递:
<FlatList
keyExtractor={(item, index) => `key-${index}`}
data={fooItems}
renderItem={item => this.renderItem(fooItems.item)}
ItemSeparatorComponent={Separator}
ListHeaderComponent={<Header yourProps={'blabla title'}/>}
ListFooterComponent={loading ? LoadingFooter : Separator}
/>
并在Header组件中使用this.props.yourProps
关于javascript - 如何将 props 传递给 ListHeaderComponent？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58750945/