React Native中FlatList外部函数调用问题：正确实现方案咨询

你遇到的错误是因为作用域问题：外部定义的Item组件无法访问App组件内部的myFunc函数。你把Item移到App内部的做法完全正确，除此之外还有另一种常用方案，具体如下：

方案1：将Item组件定义在App组件内部 #

这种方式简单直接，适合Item组件仅在App组件内使用的场景，自然能访问App内部的所有函数：

const App = () => {
  const myFunc = (x) => {
    console.log(x);
    // 你的业务逻辑
  };

  // 内部定义Item组件
  const Item = ({ item }) => (
    <TouchableOpacity style={{ padding: 10, borderBottomWidth: 1 }}>
      <Button title='Go' onPress={() => myFunc('abc')} />
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={yourData}
      renderItem={({ item }) => <Item item={item} />}
      keyExtractor={(item) => item.id}
    />
  );
};

方案2：将myFunc作为props传递给Item组件 #

如果Item组件需要在多个地方复用，推荐用这种方式，把函数通过props传入：

// 外部定义可复用的Item组件
const Item = ({ item, onButtonPress }) => (
  <TouchableOpacity style={{ padding: 10, borderBottomWidth: 1 }}>
    <Button title='Go' onPress={() => onButtonPress('abc')} />
  </TouchableOpacity>
);

const App = () => {
  const myFunc = (x) => {
    console.log(x);
    // 你的业务逻辑
  };

  return (
    <FlatList
      data={yourData}
      renderItem={({ item }) => <Item item={item} onButtonPress={myFunc} />}
      keyExtractor={(item) => item.id}
    />
  );
};

两种方案都是React Native中处理此类场景的标准写法，可根据组件复用需求选择。

内容的提问来源于stack exchange，提问作者Vit