使用JSX与本机Javascript对向组件传递数据作出反应

这应该是一个简单的问题。我将JSX和ES6与Babel一起使用，以传输我的JSX和ES6，这些方面肯定是有效的。但是，当我试图通过JSX样式的调用将数据传递到

ContactItem

组件时遇到了障碍。请参见下面的简单示例

const contacts = [
    {key: 1, name: "Bob"},
    {key: 2, name:"Dude"}
  ]

class ContactItem extends React.Component {
   ...
}

// the following Javascript call works to loop through each contact and pass the data to ContactItem 
const contactListItems = contacts
  .map(contact => { return React.createElement(ContactItem, contact); });

// While using JSX, the contact data is not flowing through to ContactItem.
const contactListItemsJSX = contacts
  .map(contact => { return <ContactItem contact /> });

const contacts=[
{key:1，name:“Bob”}，
{键：2，名字：“都德”}
]
类ContactItem扩展了React.Component{
...
}
//下面的Javascript调用用于循环每个联系人，并将数据传递给ContactItem
const contactListItems=联系人
.map（contact=>{return React.createElement（ContactItem，contact）；}）；
//在使用JSX时，联系人数据不会流向ContactItem。
const contactListItemsJSX=联系人
.map（contact=>{return}）；

---

为什么使用

时不传递数据？

语法正确吗？看起来你需要用括号括起来

const contactListItemsJSX = contacts.map(contact => { return (<ContactItem contact />) });

const contactListItemsJSX=contacts.map（contact=>{return（）}）；

相当于

React.createElement(ContactItem, contact);

在JSX中是

<ContactItem {...contact} />;

；

有关更多信息，请参阅。

“为什么在使用时不传递数据？”因为

表示

联系人项目

通过布尔属性

联系人

。