Question

我在学习时会做出反应。我对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的值？

感谢您的帮助。

Answer 1

这是箭头功能和解构的组合。您有一个接收对象的函数，通过将所需的参数用花括号括起来，可以将该属性从传递的对象中拉出。在下面的代码中，您将使用JSX标记Item和（{myTitle}）传递了props对象之后，就从该props对象中解构了myTitle元素，然后使其可以在函数主体中使用。

i++

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.

需要帮助来理解本机语法

2 个答案: