JSX必須用封閉標記錯誤

出了什麼問題我下面的地圖包？一切都正常進行包裝，而我仍然得到的jsx must wrap with an enclosing tagJSX必須用封閉標記錯誤

<div className="col-md-12"> 
    {items.map(obj => { 
     <h2 className="title">{obj.name}</h2> 
     <p className="edited">Last updated on {obj.updated_at}</p> 
     <div className="actions_wrap"> 
      <Link to="/item/edit/"{obj._id}>Edit</Link> 
      <a>Delete</a> 
     </div> 
    })} 
</div>

錯誤此行有錯誤，如果我有一個div包裹的東西：

<Link to="/item/edit/"{obj._id}>Edit</Link>

來源

2017-04-11 Alex Yong

您的地圖沒有返回的組件。將'=> {...}'改爲'=>（...）'或添加一個返回值。您可能還需要包裝在一個單一的元素 – david

您的來電.map返回多個元素。也許你應該把它包裝在div？

<div className="col-md-12"> 
    {items.map(obj => { 
     <div> 
      <h2 className="title">{obj.name}</h2> 
      <p className="edited">Last updated on {obj.updated_at}</p> 
      <div className="actions_wrap"> 
       <Link to="/item/edit/"{obj._id}>Edit</Link> 
       <a>Delete</a> 
      </div> 
     <div> 
    })} 
</div>

來源

2017-04-11 01:04:06

內容也許應該也與括號 – Hamms

@Daniel取代那些花括號，我得到了這條線'<鏈接=「/項目/編輯/」 {} obj._id>錯誤編輯' –

JSX有一個限制，即從一個語句返回只能有1個頂級節點。

從JSX in depth

一個陣營組件不能返回多個反應的元素，但單一的JSX表達可以有多個孩子，所以如果你想要一個組件以使多事情，你可以在一個div包裹它像這樣

如果你的例子，你有3個節點作爲兄弟彼此：h2，p和div。

您可以通過包裝他們都在1個頂層容器解決這個問題：

<div className="col-md-12"> 
    {items.map(obj => { 
     <div> 
      <h2 className="title">{obj.name}</h2> 
      <p className="edited">Last updated on {obj.updated_at}</p> 
      <div className="actions_wrap"> 
       <Link to=`/item/edit/${obj._id}`>Edit</Link> 
       <a>Delete</a> 
      </div> 
     </div> 
    })} 
</div>

來源

2017-04-11 01:05:23 Anuj

該行沒有工作'<鏈接= 「/項目/編輯/」{} obj._id>編輯' –

您可以將行更改爲：'<鏈接= \'/項目/編輯/ $ {obj._id} \'>編輯' - 注意使用反引號進行字符串插值 – Anuj

考慮你是什麼地圖被返回。 jsx中的每個DOM元素基本上都是一個對象，因此您的地圖試圖返回javascript中不允許的一些內容。在JSX這個問題的解決是使內容仍然包裹另一個DOM元素的DOM元素的集合，但你的JavaScript實現的要求，一個函數只返回一兩件事。

來源

2017-04-11 01:07:13 user2027202827

JSX必須用封閉標記錯誤

回答

相關問題