如何将道具传递给 ListHeaderComponent？答案

【问题标题】：How do I pass props to ListHeaderComponent?如何将道具传递给 ListHeaderComponent？
【发布时间】：2019-11-07 14:31:29
【问题描述】：

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

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

在我的 FooItemsComponents 上，我有一个带有 renderItems 功能的平面列表，它正在工作。但是，我想对 Flatlist 项目列表进行更改，然后我想在我的 Flatlist 组件的标题中单击保存。

我现在遇到的主要问题是将道具发送到我的平面列表的标题组件。道具未定义，我不知道如何从我的 FooItemsComponent 或当我在页面之间导航时发送道具？

这是我的 FooItemsComponent 中的一些 sn-ps：

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>

        );
    }
}

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

使用箭头函数并包装标题：

 <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

【讨论】：

你永远不应该这样做。如果你这样做，React 将不会知道你正在渲染的 <Header> 应该是每次重新渲染之间的相同组件。因此，它将在每个渲染上创建一个新的标头组件，这将导致性能损失并且会破坏与该组件关联的任何状态。例如，尝试这样做并将<TextInput> 作为标题组件传递。每次输入字符时它都会失去焦点，因为它每次都是新的文本输入。见stackoverflow.com/questions/60622941/…
我同意并编辑此（删除匿名函数）

【解决方案2】：

永远不要使用箭头函数来渲染作为 props 传递的组件，React 不会有对该函数的稳定引用，因此不会知道标题组件应该是渲染之间的相同组件。它可能会导致错误并会损害性能。请参阅SearchBar in FlatList loses focus after typing 了解它可能导致的错误示例。虽然，Idan 已经非常接近找到正确的解决方案了。而是这样做：


 <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}
   />

【讨论】：