需要幫助理解 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.