如何将此功能放入组件中

Question

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

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

只需在try/catch中使用 if/else 语句和三元条件即可创建字符串。应该通过将参数传递给函数来完成一个或另一个之间的选择：

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