我在学习时会做出反应。我对React和Native都是全新的。我也是javascript初学者,尽管我已经用Java编程了一段时间。
我有这段代码,我想了解箭头功能:
export default function App() {
// A
const DATA = [
{ id: '123',
value: 'First Iem'
},
{ id: '456',
value: 'Second Iem'
},
{ id: '789',
value: 'Third Iem'
},
];
// B
const Item = ({myTitle}) => (
<View>
<Text>{myTitle}</Text>
</View>
);
// C
const renderMyItem = ({item}) =>(
<Item myTitle={item.value}/>
);
return (
<View>
// D
<FlatList
data={DATA}
renderItem={renderMyItem}
keyExtractor={mydata => mydata.id}
/>
</View>
);
}
const styles = StyleSheet.create({
});
我从中了解到的是: 在A,我们有一系列对象;每个对象都有一个id属性和一个value属性。很好。
但是,在B处有此语法({whatever})
。如果我们看C,就会发现<Item myTitle={item.value}/>
因此,我是否可以假设,通过使用({whatever})
语法,我们可以为元素分配属性,就像在html中那样,我们具有具有属性的元素,例如<img src="">
? / p>
此外,在C中,我们具有相同的语法const renderMyItem = ({item})
,而const renderMyItem
在D(FlatList)中使用。我是否正确假设FlatList属性renderItem
取自DATA
的一项并将其作为参数传递给const renderMyItem
属性item
,而该属性依次为是Item
属性myTitle
的值?
感谢您的帮助。
答案 0 :(得分:0)
这是箭头功能和解构的组合。您有一个接收对象的函数,通过将所需的参数用花括号括起来,可以将该属性从传递的对象中拉出。在下面的代码中,您将使用JSX标记Item和({myTitle})传递了props对象之后,就从该props对象中解构了myTitle元素,然后使其可以在函数主体中使用。
i++
答案 1 :(得分:0)
最终renderItem
收到此消息:
<FlatList
data={DATA}
renderItem={{(item)} => {
return ( <View>
<Text>{item.value}</Text>
</View> )
}}
keyExtractor={mydata => mydata.id}
/>
where `item` iterates for every entry that `DATA` object has, in this case i.e 3.