Question

希望这对某些人来说很容易......但是我被困在这里。我期待映射一个常数。我想要映射的一件事是一个onPress函数......所以在我的常量中，我包括了我想要的功能，但是我和＃34;这个＆＃34;有问题。这个例子应该是最有意义的...如何正确设置这一点，我们将不胜感激。我正在使用React Native，但我确定同样的原则适用于React。

package services;    
service EmptyPingPongService {
  // One empty request followed by one empty response.
  rpc EmptyCall(messages.Empty) returns (messages.Empty);
}

我继续收到的错误是：

const ITEMS = [
  { title: 'Item 1', subTitle: 'Click here for Item 1 function', onPress: () => this.function1() },
  { title: 'Item 2', subTitle: 'Click here for Item 2 function', onPress: () => this.function2() }
]

class Page extends Component {
  function1 = () => {
    console.log('This is function 1');
  }

  function2 = () => {
    console.log('This is function 2');
  }

  render() {
    return (
      <View>
          {_.map(ITEMS, (item, itemIndex) => {
            return (
              <Item
                key={itemIndex}
                title={item.title}
                subTitle={item.subTitle}
                onPress={item.onPress}
                index={itemIndex}
              />
            );
          })}
      </View> 
    );
}

export default Page;

有人知道如何正确设置吗？谢谢！

Answer 1

对于React Native，您可以使用ITEMS.map作为用户Envision评论。

您正在尝试在this类之外使用Page，这意味着在其上下文中，function1()和function2()不存在。请注意，如果您在const ITEMS课程内移动Page，请在render()内，它会开始有效。

render() {
  const ITEMS = [
    { title: 'Item 1', subTitle: 'Click here for Item 1 function', onPress: () => this.function1() },
    { title: 'Item 2', subTitle: 'Click here for Item 2 function', onPress: () => this.function2() }
  ]

  return (
    <View>
      {ITEMS.map((item, itemIndex) => {
        return (
          <Item
            key={itemIndex}
            title={item.title}
            subTitle={item.subTitle}
            onPress={item.onPress}
            index={itemIndex}
          />
        );
      })}
    </View>
  )
}

这更像是一个基本的Javascript理解问题。要了解如何使代码按照您的意愿执行操作，您应该阅读this以及最终bind()的工作原理。其他StackOverflow answer也可能有所帮助。

来自Constant的React（Native）函数

1 个答案: