Pass Funktion als Stütze

Question

ich eine onSelection Funktion auf eine Komponente passieren versuchen:

const GenderScreen = (props) => { 

    const onSelection =() => {console.log('clicked')}; 

    const buttons = ['one','two', 'three']; 
    const breadcrumb = `${i18n.t('stage 1')} > ${i18n.t('stage 2')} > ${i18n.t('stage 3')}`; 
    const sceneConfig = { 
    centredButtons: ['one','two', 'three'], 
    question: { 
     text: [breadcrumb, i18n.t('What is your ethnicity?')], 
    }, 
    selectNumber: {}, 
    onSelection: this.onSelection 
    }; 
    return <SceneCentredButtons { ...props} sceneConfig={sceneConfig} />; 
}; 

Kinder Komponente:

const SceneCentredButtons = props => (
    <LYDSceneContainer goBack={props.goBack} subSteps={props.subSteps}> 
    <Flexible> 
     <LYDSceneQuestion {...props.sceneConfig.question} /> 
     <LYDCentredButtons 
     {...props.sceneConfig} 
     onSelection={props.sceneConfig.onSelection} 
     /> 
    </Flexible> 
    </LYDSceneContainer> 
); 



function LYDCentredButtons(props) { 
    const buttons = this.props; 

    return (
    <View style={styles.main}> 
     {props.centredButtons.map((button, i) => { 
     const isLast = i + 1 === props.centredButtons.length; 
     const marginBottomStyle = !isLast && { 
      marginBottom: theme.utils.em(1.5), 
     }; 
     return (
      <LYDButton 
      style={[styles.button, marginBottomStyle]} 
      label={button.text} 
      onPress={() => props.onSelection(button.value)} 
      /> 
     ); 
     })} 
    </View> 
); 
} 

Wenn jedoch in meiner Komponente erhalte ich die Fehlermeldung:

props.onSelection ist keine Funktion

Wie kann ich eine Funktion übergeben, die beim Klicken auf meine Schaltflächen verwendet wird?

Answer 1

GenderScreen ist eine zustandslose Funktionskomponente, Sie müssen nicht das Schlüsselwort this verwenden (dies ist nicht definiert).

Also statt this.onSelectiononSelection verwenden.

So:

const sceneConfig = { 
    centredButtons: ['one','two', 'three'], 
    question: { 
     text: [breadcrumb, i18n.t('What is your ethnicity?')], 
    }, 
    selectNumber: {}, 
    onSelection: onSelection 
};