Question

以下情况如何工作：

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

在这里，FlatList收到一个回调函数，该函数可以访问包含item变量（可以看到）的对象，该变量来自子组件FlatList。它可以以某种方式将包含item的对象提供给回调，并仍使用传递给它的renderItem道具来呈现项目。

我正在尝试在此处实现类似的目标：my sandbox

但是我遇到这个错误，它说React child不能是一个函数。我同意这一观点是完全正确的，但是我无法想到如何实现这一点。也许我在这里缺少一些简单的概念。

任何帮助将不胜感激。预先感谢！

Answer 1

您应该使用return语句更新代码。

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => {
        return <Text>{item.key}</Text>;
    }}
/>

Answer 2

只需使用(和)而不是{ }。这将返回您的组件。

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => (
       <Text>{item.key}</Text>
     )   
  }
/>

Answer 3

根据您的沙箱，您需要在调用沙箱时传递参数以获取任何返回值。在类函数中，如果您使用类级变量，则不需要传递值，但是在这种情况下，您是在使用参数执行函数，因此需要向其传递参数。这就是为什么您无法获得该值，因为您的组件正在渲染summary或details时，无法找到该函数的引用而不是实际的返回值。

我对您的sandbox进行了更改以传递虚拟值，您可以根据需要替换它。

从React中父组件的回调函数中的子组件访问变量，并在父组件中呈现返回的值

3 个答案: