所以我在我的 React Native Code 中遇到了一件有趣的事情。你們能解釋一下為什么會這樣嗎？
import React, { useState, useEffect } from "react";
import { SafeAreaView, Text, FlatList } from "react-native";
import config from "../../../config";
import axios from "axios";
import ProductCard from "../../components/ProductCard/ProductCard";
const Products = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const { data: productData } = await axios.get(config.API_URL);
setData(productData);
};
const renderProduct = ({ item }) => <ProductCard product={item} />;
return (
<SafeAreaView>
<FlatList data={data} renderItem={renderProduct} />
</SafeAreaView>
);
};
export default Products;
在 ProductCard 組件中，我基本上將輸出格式化為如下所示。那里沒有魔法。
然后我想讓你們看看當我用花括號這樣編碼時的 renderProduct 函式：
const renderProduct = ({ item }) => {
<ProductCard product={item} />;
};
輸出如下：
老實說，我不明白為什么。花括號有什么魔力？
如果這個解釋還不夠，請告訴我添加其他內容:)
uj5u.com熱心網友回復：
({ item }) => <ProductCard product={item} />
是一個回傳 ProductCard 組件的箭頭函式。它基本上是這樣的簡寫語法：
({ item }) => { return <ProductCard product={item} />; }
當你使用它而不回傳時，它基本上就像運行代碼而不回傳它，這就是為什么
const renderProduct = ({ item }) => {
<ProductCard product={item} />;
};
在您的情況下不會呈現任何內容。
uj5u.com熱心網友回復：
因為在第一種情況下你還沒有寫{ }，所以會直接回傳組件。
但是在第二種情況下，你已經寫了{ }inrenderItem所以如果你想渲染組件，那么你必須寫return這樣的詞
({ item }) => { return <ProductCard product={item} />; }
謝謝！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/528296.html
標籤：反应反应式
上一篇：使用傳統的后端分頁實作無限查詢