javascript - 使用JSX和 native Javascript对将数据传递到组件的 react

这应该很简单。我将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 /> });

为什么使用<ContactItem contact />时不能传递数据？

最佳答案

相当于

React.createElement(ContactItem, contact);

在JSX中是

<ContactItem {...contact} />;

有关更多信息，请参见JSX Spread Attributes。