マップを使ってHTML ReactJSを作成する

Question

私はオブジェクトの配列を持っています。

notifications = [ 
{notification:"this is notification1"}, 
{notification:"this is notification2"}, 
{notification:"this is notification3"}, 
] 

私は配列をマップし、そこからHTMLコードを作成しようとしていました。

return (
     <div> 
     {notifications.map(function(notificationItem) { 
     <a> {notificationItem.notification} </a> 
     })} 
     </div> 
    ); 

誰かがこの間違いを教えてください。

ありがとうございました！

Answer 1

.mapからあなたが値を返す必要があります - 。。。.mapにreturnステートメントを追加し、この場合においても、各要素のkeyプロパティを追加する必要があり、子要素が一意のキーを持っている必要があるので、あなたは和解についての詳細を読むことができhere

var App = React.createClass({ 
 
    render: function() { 
 
    const notifications = this.props.notifications 
 
     .map(function(notificationItem, index) { 
 
     return <a key={index}> {notificationItem.notification} </a>; 
 
     }); 
 

 
    return <div>{ notifications }</div>; 
 
    } 
 
}); 
 

 
var notifications = [ 
 
    {notification:"this is notification1"}, 
 
    {notification:"this is notification2"}, 
 
    {notification:"this is notification3"}, 
 
]; 
 

 
ReactDOM.render(
 
    <App notifications={ notifications } />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

Answer 2

私はまた、あなたがステートフルが反応する必要はありませんならば、あなたもこのスタイルであなたのコンポーネントを書き込むことができることを追加したい：

const notifications = [ 
    { notification: "1" }, 
    { notification: "2" }, 
    { notification: "3" }, 
]; 

const App = function({ notifications }) { 
    return (
    <div> 
     { 
     notifications.map((item, index) => <a key={index}>{item.notification}</a>) 
     } 
    </div> 
) 
} 

ReactDOM.render(
    <App notifications={ notifications } />, 
    document.getElementById("app") 
)