在React容器組件中找不到內部方法

Question

我試圖將AJAX檢索到的數據放到父React組件中，以便將它反饋到子組件。我使用的流行的圖案爲這個定義here其中註釋列表被用作例如：

組件/ CommentList.js

import React from 'React'; 

export class CommentList extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return <ul> {this.props.comments.map(renderComment)} </ul>; 
    } 
    renderComment({body, author}) { 
    return <li>{body}—{author}</li>; 
    } 
} 

組件/ CommentListContainer.js

import React from 'React'; 
import { CommentList } from './CommentList'; 


export class CommentListContainer extends React.Component { 
    constructor() { 
    super(); 
    this.state = { comments: [] } 
    } 

    componentDidMount() { 
    $.ajax({ 
     url: "http://get/some/api", 
     dataType: 'json', 
     success: function(comments) { 
     this.setState({comments: comments}); 
     }.bind(this) 
    }); 
    } 
    render() { 
    return <CommentList comments={this.state.comments} />; 
    } 
} 

索引.js：webpack的入口點

import React from 'react' 
import { render } from 'react-dom' 
import { CommentListContainer } from './components/CommentListContainer'; 

window.React = React; 

render(
    <CommentListContainer />, 
    document.getElementById('nav__react-target') 
) 

在做這一切時，我出現以下錯誤：

Uncaught ReferenceError: renderComment is not defined

我有移動周圍的方法，以及調整了依賴進口的，沒有運氣各個景點。有任何想法嗎？

在此先感謝。

Answer 1

你不必無人防守的引用兄弟與ES2015類的方法（如您在Java/C＃等做） - 而不是你需要明確地引用this獲得在類的方法：

render() { 
    // I changed map(renderComment) to map(this.renderComment) 
    return <ul>{this.props.comments.map(this.renderComment)}</ul>; 
}