发送道具然后在React中使用它作为函数?

时间:2017-03-06 17:31:22

标签: javascript reactjs react-native ecmascript-6 react-native-router-flux

我正在尝试发送RouteKey道具,然后尝试在链式函数中使用道具。

这是我的组件:

<MenuItem RouterKey={'assetsList'} />

在组件定义中,我试图在actions函数中使用它,如下所示:

    import { Actions } from 'react-native-router-flux';
    const MenuItem = (props) => {
  return (
      <TouchableWithoutFeedback onPress={() => { return `${Actions}.${props.RouterKey}()`; }}>
        <View>
         //somethings here...
        </View>
      </TouchableWithoutFeedback>
  );
};

基本上我想做的是:

<TouchableWithoutFeedback onPress={() => { Actions.whateverWasPassed(); }}>

但是,我无法做到这一点。我在这里错过了什么?我知道我这样做的方式是错误的。这样做的正确方法是什么?

1 个答案:

答案 0 :(得分:4)

您可以ClassName[methodName]()动态调用任何静态方法。当您将方法名称作为字符串时,它尤其有用。 (就像你的情况一样)。

所以在你的情况下,它将是

<TouchableWithoutFeedback onPress={() => { return Actions[props.RouterKey]();}}>

您可以遵循的另一种方法是,您可以直接将Actions.assetsList方法作为道具传递,并在MenuItem组件中调用它。

<MenuItem scene={Actions.assetsList} />

现在,在MenuItem组件中,您可以将此方法调用为props.scene()。这两种方法都可以正常工作。

以下是关于类似问题的answer的链接。