需要帮助理解 react-native 语法

Question

我正在学习 react-native。 我对反应和 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 我们有一个对象数组； 每个 object 都有一个 id 属性和一个 value 属性。 没关系。

但是，在 B 处，有这种语法({whatever}) 。 如果我们查看 C，我们会发现<Item myTitle={item.value}/>

那么，我是否正确地假设，通过使用这种语法({whatever}) ，我们能够为元素分配属性，就像在 html 中我们有具有属性的元素，例如<img src=""> ？

此外，在 C 中，我们有相同的语法const renderMyItem = ({item}) ，并且const renderMyItem用于 D（FlatList）。 我是否正确假设 FlatList 属性renderItem正在从DATA中获取一个项目并将其作为参数传递给const renderMyItem属性item ，而后者又作为Item属性myTitle的值给出？

谢谢你的帮助。

Answer 1

这是箭头函数和解构的组合。 您有一个 function 接收一个 object 并通过将您想要的参数包装在花括号中，您可以将该属性从 object 中拉出该属性，该属性通过使用下面传入的 JSX 代码调用 Item 并在下面的 JSX 代码中调用。它传递了一个道具 object，({myTitle}) 正在从该道具 object 中解构 myTitle 元素，然后使其可用于 ZC1C425268E68385D1AB5074C17A94F 主体。

const Item = ({myTitle}) => (
    <View>
      <Text>{myTitle}</Text>
    </View>
);

<Item myTitle={item.value}/>

Answer 2

最终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.