需要帮助理解 react-native 语法答案

【问题标题】：Need help understanding react-native syntax需要帮助理解 react-native 语法
【发布时间】：2020-07-18 20:55:19
【问题描述】：

我正在学习 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=""> ？

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

感谢您的帮助。

【问题讨论】：

reactjs.org/docs/introducing-jsx.html
还有stackoverflow.com/questions/10804982/…
谢谢大家的帮助

标签： javascript react-native

【解决方案1】：

最终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】：

这是箭头函数和解构的结合。您有一个接收对象的函数，通过将您想要的参数包装在花括号中，您可以从传入的对象中提取该属性。在下面的代码中，您通过使用 JSX 标记调用 Item 和它传递一个 props 对象，({myTitle}) 正在从该 props 对象中解构 myTitle 元素，然后使其可用于函数体。

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

<Item myTitle={item.value}/>

【讨论】：