ループ内のjsx反応中

Question

私は3 spanを生成したいと思いますdiv反応を使用して、ここに私のコードです。

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が生成されました、なぜですか？ここに何か悪いことはありますか？

Answer 1

{}を使用している場合、通常の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> 
    ) 
    } 
} 

Answer 2

値を返す必要があります。これは動作するはずです：

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> 
     ) 
     } 
    } 

Answer 3

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> 
     ); 
    } 
} 

Answer 4

あなたは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