Reactjs 道具传递函数

我试图将

onSelection

函数传递给组件：

 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} />;
};

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>
  );
}

const GenderScreen=（道具）=>{
const onSelection=（）=>{console.log（'clicked'）}；
常量按钮=['1'、'2'、'3']；
const breadcrumb=`${i18n.t（'stage 1'）}>${i18n.t（'stage 2'）}>${i18n.t（'stage 3'）}`；
const sceneConfig={
中央按钮：[“一”、“二”、“三”]，
问题:{
文本：[面包屑，i18n.t（'你的种族是什么？'）]，
},
选择号码：{}，
onSelection:this.onSelection
};
返回；
};

子组件：

 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} />;
};

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>
  );
}

const SceneCentredButtons=props=>(
);
功能LydCenter按钮（道具）{
const buttons=this.props；
返回(
{props.centredButtons.map（（按钮，i）=>{
const isLast=i+1==props.centredButtons.length；
常量marginBottomStyle=！isLast&&{
marginBottom:theme.utils.em（1.5），
};
返回(
props.onSelection（button.value）}
/>
);
})}
);
}

但是，当在我的组件中出现错误时：

props.on选择不是一项功能

---

单击按钮时，如何传递要使用的函数？

GenderScreen

是一个无状态的功能组件，您不需要使用

此

关键字（这将是未定义的）

因此，使用

onSelection

而不是

this.onSelection

像这样：

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

---

您确定传递的道具包含onSelection函数吗？