React Передача данных компонентам с JSX и родным Javascript

Question

Это должно быть просто. Я использую JSX и ES6 с Babel, чтобы превзойти мои JSX и ES6, и эти аспекты определенно работают. Однако, когда я сталкиваюсь с камнем преткновения, пытаясь передать данные в компонент ContactItem с помощью вызова в стиле JSX. См простой пример ниже ...

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 />?

Answer 1

Эквивалент

React.createElement(ContactItem, contact); 

в JSX является

<ContactItem {...contact} />; 

См JSX Spread Attributes для получения дополнительной информации.

Answer 2

- синтаксис правильный? Похоже, вам нужно заключить в скобки.

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