從React中父組件的回調函數中的子組件訪問變量，並在父組件中呈現返回的值

Question

以下情況如何工作：

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

在這里， FlatList接收一個回調函數，該函數可以訪問一個包含item變量的對象（可以看到），該變量來自子組件FlatList 。 它能夠以某種方式將對象（包含item ）提供給回調，並仍然使用傳遞給它的renderItem prop渲染該項目。

我正在嘗試在這里實現類似的目標： 我的沙箱

但是我面對這個錯誤，它說React child不能是一個函數。 我同意這一觀點是完全正確的，但是我無法想到如何實現這一點。 也許我在這里缺少一些簡單的概念。

任何幫助將不勝感激。 提前致謝！

Answer 1

根據您的沙箱，您需要在調用沙箱時傳遞參數，以獲取任何返回值。 在類函數中，如果您使用類級變量，則不需要傳遞值，但是在這種情況下，您是在使用參數執行函數，因此需要向其傳遞參數。 這就是為什么您無法獲得該值，因為當您的組件呈現summary或details ，它無法找到函數的引用，而不是實際的返回值。

我已對您的沙箱進行了更改以傳遞虛擬值，您可以根據需要替換它。

Answer 2

您應該使用return語句更新代碼。

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

Answer 3

只需使用(和)代替{ } 。 這將返回您的組件。

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