jsx中的迴路反應

我想在div內使用反應生成3 span，這裏是我的代碼。jsx中的迴路反應

export class Test extends React.Component<undefined, undefined> { 
    render() { 
    const list = ['test1', 'test2', 'test3']; 
    const body = (
     list.map(s => { 
     <span>s</span> 
     }) 
    ) 
    return (
     <div> 
     {body} 
     </div> 
    ) 
    } 
}

但它沒有奏效。 div裏面沒有標籤生成，爲什麼？這裏有什麼不對嗎？

來源

2017-08-28 Searene

當使用{}就表示一個普通JS的語法，而在這種情況下，你正在嘗試使用JSX語法，所以你應該把它包在()或暗含回報，你可以忽略它。

export class Test extends React.Component<undefined, undefined> { 
    render() { 
    const list = ['test1', 'test2', 'test3']; 
    const body = (
     list.map(s => 
     <span key={s}>s</span> 
    ) 
    ) 
    return (
     <div> 
     {body} 
     </div> 
    ) 
    } 
}

來源

2017-08-28 13:02:40 Nocebo

我投了你的答案，因爲它是最乾淨的，但你應該解釋爲什麼刪除'{}'消除了'return'的需要。 –

對不起。如果@Searene想要結合jsx和es6閱讀更多關於'map'的知識，那麼有很多有用的教程和文檔。另外我忘了提及，你應該在'map'裏爲你的標籤提供一個'key'，就像這樣：https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions -as兒 – Nocebo

您需要返回值。這應該工作：

export class Test extends React.Component<undefined, undefined> { 
     render() { 
     const list = ['test1', 'test2', 'test3']; 
     const body = list.map(s => { 
      return <span>s</span> 
      }) 
     return (
      <div> 
      {body} 
      </div> 
     ) 
     } 
    }

來源

2017-08-28 13:02:50

import React,{ Component } from 'react'; 
export class Test extends Component { 

    renderRows(){ 
     const lists = ['test1', 'test2', 'test3']; 
     lists.map(list=>{ 
      return (
       <span key={list}>{list}</span> 
      ); 
     }) 
    } 

    render() { 
     return (
      <div> 
       {this.renderRows()} 
      </div> 
     ); 
    } 
}

來源

2017-08-28 13:13:36

您可以使用「簡潔體」或慣用的「塊體」在ES6箭頭功能地圖的方法回調函數。

在一個簡潔的主體中，只需要一個表達式，並附加一個隱式返回。在塊體中，您必須使用顯式的return語句。

簡明體

export class Test extends React.Component<undefined, undefined> { 
    render() { 
    const list = ['test1', 'test2', 'test3']; 
    const body = (
     list.map(s => 
     <span key={s}>s</span> 
    ) 
    ) 
    return (
     <div> 
     {body} 
     </div> 
    ) 
    } 
}

塊體：

export class Test extends React.Component<undefined, undefined> { 
    render() { 
    const list = ['test1', 'test2', 'test3']; 
    const body = (
     list.map((s) => 
     {return <span key={s}>s</span>} 
    ) 
    ) 
    return (
     <div> 
     {body} 
     </div> 
    ) 
    } 
}

欲瞭解更多信息，請參閱該頁面：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

來源

2017-08-28 13:31:28

jsx中的迴路反應

回答

相關問題