استدعاء الأساليب ديناميكيا في رد فعل

0

أحاول استدعاء بعض الطرق ديناميكيًا في مكون React الخاص بي.

لذلك لدي هذا الرمز حيث أريد استدعاء دالة stepOne ، stepTwo ، وما إلى ذلك كلما تم تحقيق هذه الخطوة ، ولكن يجب استدعاء ذلك ديناميكيًا لإضافة خطوات جديدة في المستقبل.

ومع ذلك حاولت بالفعل طريقتين ( hasOwnProperty ، typeof this[methodName] ، this.{methodName}() ) ولا يمكن الاتصال بالطريقة الصحيحة.

ها هو الكود الخاص بي:

class MyComponent extends React.Component<Props,State>{

    steps = [
        'stepOne',
        'stepTwo',
        'stepThree',
    ];

    state = {step:1};

    stepOne(){
        return 'This is Step One';
    }

    stepTwo(){
        return 'This is Step Two';
    }

    _getContent(){
        let content = 'Step not exists';

        const methodName = this.steps[this.state.step - 1];

        if (typeof this[methodName] === 'function') {
            content = this[methodName]();
        }
        return content;
    }

    render(){
        return '<div>' + this._getContent() + '</div>'
    }
}

في هذا المثال ، أحصل دائمًا undefined في ال typeof this[methodName] عملية

1 إجابة

1
افضل جواب

حاول إنشاء خريطة الوظائف وربط هذا السياق بالوظائف التي تم إنشاؤها

class MyComponent extends React.Component<Props,State>{
    constructor(props){
        super(props);
        this.stepOne = this.stepOne.bind(this);
        this.stepTwo = this.stepTwo.bind(this);
        this.funcMap = {
            '1': this.stepOne,
            '2': this.stepTwo
        };
        this.state = {step: '1'};
    }


    stepOne(){
        return 'This is Step One';
    }

    stepTwo(){
        return 'This is Step Two';
    }

    _getContent(){
        let content = 'Step not exists';

        const method = this.funcMap[this.state.step];

        if (typeof method === 'function') {
            content = method();
        }
        return content;
    }

    render(){
        return '<div>' + this._getContent() + '</div>'
    }
}
:مؤلف
فوق
قائمة طعام