コンポーネント内のコンポーネントを呼び出すようにしてください - React

Question

私はReactを使い始めました。

最初のコンポーネントではmap（）関数（動作する）を使用してオブジェクトの配列を反復し、単純なh1タグを返すだけの他のコンポーネントを呼び出したいと思います。

まあ、何も呼び出されておらず、コンソールにエラーはありません。

HomePageBoxesData.js

私は（私はリターン文の後 console.logをすれば、それはそこではないようですが、にconsole.logが復帰する前であれば、それは起動します）問題が renderAvatarData() で戻り文であると信じて

import React, { Component } from 'react'; 

import AvatarDetails from './AvatarDetails'; 

class HomePageBoxesData extends Component{ 

    constructor(props) { 
    super(props); 
    }; 

    renderAvatarData(){ 
    this.props.data.map(data => { 
     return <AvatarDetails data={data}/>  
    }); 
    } 

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

export default HomePageBoxesData; 

AvatarDetails.js

import React, { Component } from 'react'; 

class AvatarDetails extends Component{ 

    constructor(props) { 
     super(props); 
    }; 

    render(){ 
     return(
     <h1>Hello World</h1> 
     ); 
    } 
}; 

export default AvatarDetails; 

Answer 1

問題は、あなたが012でreturnを使用するのを忘れて、renderAvatarData()方法でありますあなただけのコンポーネントをreturnしたいので、あなたが直接このようにそれを書くことができ、

renderAvatarData(){ 
    return this.props.data.map((data)=>{ 
     return <AvatarDetails data={data}/> 

    }); 
} 

：、これを使用し、私はMayankシュクラに同意

renderAvatarData(){ 
    return this.props.data.map(data => <AvatarDetails data={data} />); 
} 

Answer 2

しかし、私は通常、この場合には、このメソッドを使用します：

render() { 
     return(
     <div> 
     _.map(this.props.data, function(value, key){ 
      return(
      <AvatarDetails key={key} data={value} /> 
     ) 
     }) 
     </div> 

私は他の