Javascript 如何将HoC与React Native一起使用

我有一个列表应用程序，用户可以为多个类别添加项目，当他们想要添加新记录时，有3个相关屏幕具有此特定功能。所有这些屏幕都有

组件，所以我认为HoC在这里很好，这样我就可以在3个屏幕上重用它。 然而，我无法做到这一点

以下是我迄今为止所做的尝试：

这是我的课

import React, { Component } from 'react';
import { View, StyleSheet, Text, StatusBar } from 'react-native';
import Header from '../components/Header';

const NewAd = (WrappedComponent) => {
    class NewAdHoc extends Component {
        handleBackPress = () => {
            this.props.navigation.navigate('Home');
            StatusBar.setBarStyle('dark-content', true);
        }
        render() {
            const {contentText, children} = this.props
            return (
                <View style={styles.container}>
                    <Header
                        headerText={'Yeni ilan ekle'}
                        onPress={this.handleBackPress}
                    />
                    <View style={styles.contentContainer}>
                        <Text style={styles.contentHeader}>{contentText}</Text>
                        <WrappedComponent/>
                    </View>
                </View>
            );
        }
    }


    return NewAdHoc;
}

我不知道如何修复它，因为这是我第一次在react原生应用程序上使用hocs。我已经了解了出现此错误的原因，他们建议以这种方式导入组件：

import {NewAdHoc} from '../hocs/NewAdHoc';

但即使这样也没有解决它

---

感谢您的帮助。

HOC的主要目的是在组件之间封装和重用有状态的逻辑。由于您只是在重用一些

jsx

并在

WrappedComponent

中不注入任何内容，因此您应该在此处使用常规组件：

const NewAd = ({ contentText, children }) => {

    handleBackPress = () => {
        this.props.navigation.navigate('Home');
        StatusBar.setBarStyle('dark-content', true);
    }


    return (
        <View style={styles.container}>
            <Header
                headerText={'Yeni ilan ekle'}
                onPress={this.handleBackPress}
            />
            <View style={styles.contentContainer}>
                <Text style={styles.contentHeader}>{contentText}</Text>
                {children}
            </View>
        </View>
    );
}

constnewad=（{contentText，children}）=>{
车把靠背压力=（）=>{
this.props.navigation.navigate（'Home'）；
StatusBar.setBarStyle（'dark-content'，true）；
}
返回(
{contentText}
{儿童}
);
}

像这样使用它

return(
    <>
         <NewAd>
            <Screen1 />
         </NewAd>
         <NewAd>
            <Screen2 />
         </NewAd>
         <NewAd>
            <Screen3 />
         </NewAd>
    </>
)

返回(
)

NewAdHoc是从HOC NewAd返回的组件。我认为您应该导出NewAd并使用NewAd而不是NewAdHoc

const NewAd = ({ contentText, children }) => {

    handleBackPress = () => {
        this.props.navigation.navigate('Home');
        StatusBar.setBarStyle('dark-content', true);
    }


    return (
        <View style={styles.container}>
            <Header
                headerText={'Yeni ilan ekle'}
                onPress={this.handleBackPress}
            />
            <View style={styles.contentContainer}>
                <Text style={styles.contentHeader}>{contentText}</Text>
                {children}
            </View>
        </View>
    );
}

return(
    <>
         <NewAd>
            <Screen1 />
         </NewAd>
         <NewAd>
            <Screen2 />
         </NewAd>
         <NewAd>
            <Screen3 />
         </NewAd>
    </>
)