尝试在组件内调用组件 - React答案

【问题标题】：Try to call a component inside a component - React尝试在组件内调用组件 - React
【发布时间】：2017-08-23 05:04:12
【问题描述】：

所以我从 React 开始，我有这两个组件。

在第一个组件中，我想使用 map() 函数（有效）迭代一个对象数组并调用另一个组件，该组件现在只返回一个简单的 h1 标记。

好吧，没有调用任何内容，控制台中也没有错误。我相信问题出在renderAvatarData() 的返回语句中（如果我在 return 语句之后执行console.log，它似乎没有到达那里，但如果 console.log 在它调用的 return 之前）

HomePageBoxesData.js

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;

【问题讨论】：

标签： reactjs react-native components

【解决方案1】：

问题出在renderAvatarData() 方法中，您忘记使用return 和map，使用这个：

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

    });
}

既然你只想return这个Component，你可以直接这样写：

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

【讨论】：

【解决方案2】：

我同意 Mayank Shukla 但我通常在这种情况下使用这种方法：

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

我不确定是否有一个比另一个更好

【讨论】：