我如何将道具传递给ListHeaderComponent？

Posted 2023-01-15

所以我要从第一个组件导航到FooItems页面，并将道具传递给导航。

    showFooItemsPage = () => 
        this.props.navigation.navigate('FooItemsComponent', 
            fooItems: this.props.fooItems);
  ;

在我的FooItemsComponents上，我有一个带有renderItems函数的Flatlist，并且可以正常工作。但是，我想对Flatlist项目列表进行更改，然后单击Flatlist组件标题中的Save。

我目前遇到的主要问题是向我的Flatlist的Header Component发送道具。道具是未定义的，我不知道如何从FooItemsComponent或在页面之间导航时发送道具。

这是我的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>

        );
    

答案

使用箭头功能并包装标题：

 <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