Question

我有一个React Native代码库，我在其中导入了一个组件，并两次使用相同的函数，但略有不同。我想以某种方式将其外包到新组件中。有任何想法吗？看起来像这样：

handleConfirmApplication = async () => {
    const checkVals =
        get('shiftInvite.account.accountName', this.props) === ONBOARDING_ACCOUNT
            ? omit('payRate', this.props.confirmationCheckValues)
            : this.props.confirmationCheckValues;
    if (Object.values(checkVals).every(val => val)) {
        this.props.onToggleConfirmPopUp();
        this.props.onToggleLoadingApply();
        try {
            await this.handleShiftInviteDecision('ACCEPT')();
        } catch (e) {
            Alert.alert('Error', parseError(e));
        } finally {
            this.props.onToggleLoadingApply();
        }
    } else {
        Alert.alert('Error', 'Please confirm all shift requirements');
    }
};

第二个是：

handleConfirmApplication = async () => {

    const checkVals =
        get('shift.account.accountName', this.props) === ONBOARDING_ACCOUNT
            ? omit('payRate', this.props.confirmationCheckValues)
            : this.props.confirmationCheckValues;
    if (Object.values(checkVals).every(val => val)) {
        this.props.onToggleConfirmPopUp();
        this.props.onToggleLoadingApply();
        try {
            const shiftId = this.props.shift.id;
            const {
                data: { updatedShifts },
            } = await this.props.updateMyApplication(shiftId, 'APPLY');
            this.setState({
                updatedShift: updatedShifts.find(({ id }) => id === shiftId),
            });
        } catch (e) {
            Alert.alert('Error', parseError(e));
        } finally {
            this.props.onToggleLoadingApply();
        }
    } else {
        Alert.alert('Error', 'Please confirm all shift requirements');
    }
};

Answer 1

只需在if/else中使用try/catch语句并使用三元条件来创建字符串。在一个或另一个之间进行选择应通过向函数传递参数来完成：

handleConfirmApplication = async (isInvite) => {
    const checkVals =
        get(`shift${isInvite ? 'Invite' : ''}.account.accountName`, this.props) === ONBOARDING_ACCOUNT
            ? omit('payRate', this.props.confirmationCheckValues)
            : this.props.confirmationCheckValues;
    if (Object.values(checkVals).every(val => val)) {
        this.props.onToggleConfirmPopUp();
        this.props.onToggleLoadingApply();
        try {
            if(isInvite){
                await this.handleShiftInviteDecision('ACCEPT')();
            }
            else{
                const shiftId = this.props.shift.id;
                const {
                    data: { updatedShifts },
                } = await this.props.updateMyApplication(shiftId, 'APPLY');
                this.setState({
                    updatedShift: updatedShifts.find(({ id }) => id === shiftId),
                });
            }
        } catch (e) {
            Alert.alert('Error', parseError(e));
        } finally {
            this.props.onToggleLoadingApply();
        }
    } else {
        Alert.alert('Error', 'Please confirm all shift requirements');
    }
};

并调用它：

handleConfirmApplication(true)

我是否错过了您的功能之间的其他区别？

要在可重复使用的组件中使用它：

handleConfirmApplication = async () => {
    const { isInvite } = this.props
    const checkVals =

并调用它：

<MyComponent isInvite={false} /> //Just switch it to true to get the other version

如何将该功能放入组件中？

1 个答案: