Вызов функции из JTX.Element

Question

У меня есть компонент, который отображает JTX.Element. В этом элементе мне нужно вызвать функцию исходного компонента. Однако, когда я звоню, я получаю ошибку TypeError: Cannot read property 'handleClickOpen' of undefined. Как я могу получить RenderComments, чтобы увидеть this?

const RenderComments = (comment) => (
<div>
    {comment.cur_user_id == comment.comment.user_id
    ? <Button onClick={() => this.handleClickOpen(comment.comment.cid, comment.comment.comment)} >
        Edit
      </Button>
    : null
    }
</div>
)

class showpost extends Component {
    constructor(props) {
        super(props)

        this.state = {
            open: false,
            comment: '',
            cid: ''
        }
    }

    handleClickOpen = (cid, comment) => (
          this.setState({
          open: true,
          comment: comment,
          cid: cid
        })
    )

    render() {
        return (
            <div>
                <h2>Comments:</h2>
                { this.props.comments 
                  ? this.props.comments.map(comment =>
                          <RenderComments comment={comment} 
                                cur_user_id={this.props.db_profile[0].uid}
                                key={comment.cid} />) 
                  : null
                }
            </div>
        )  
    }
}

Answer 1

const RenderComments = ({comment,superfunction}) => (
    <div>
        {cur_user_id == comment.user_id
        ? <Button onClick={() => superfunction(comment.cid, comment.comment)} >
            Edit
          </Button>
        : null
        }
    </div>
    )

    class showpost extends Component {
        constructor(props) {
            super(props)

            this.state = {
                open: false,
                comment: '',
                cid: ''
            }
        }

        handleClickOpen = (cid, comment) => (
            // Do stuff
        )

        render() {
            return (
                <div>
                    <h2>Comments:</h2>
                    { this.props.comments 
                      ? this.props.comments.map(comment =>
                              <RenderComments comment={comment} 
                                    cur_user_id={this.props.db_profile[0].uid}
                                    superfunction={this.handleClickOpen}
                                    key={comment.cid} />) 
                      : null
                    }
                </div>
            )  
        }
    }

Answer 2

Вам нужно передать handleClickOpen в RenderComments как пропеллер.

const RenderComments = ({comment, cur_user_id, handleClickOpen}) => (
<div>
    {cur_user_id == comment.user_id
    ? <Button onClick={() => handleClickOpen(comment.cid, comment.comment)} >
        Edit
      </Button>
    : null
    }
</div>
)

class showpost extends Component {
    constructor(props) {
        super(props)

        this.state = {
            open: false,
            comment: '',
            cid: ''
        }
    }

    handleClickOpen = (cid, comment) => (
        // Do stuff
    )

    render() {
        return (
            <div>
                <h2>Comments:</h2>
                { this.props.comments 
                  ? this.props.comments.map(comment =>
                          <RenderComments comment={comment} 
                                cur_user_id={this.props.db_profile[0].uid}
                                key={comment.cid} />) 
                                handleClickOpen={this.handleClickOpen}
                  : null
                }
            </div>
        )  
    }
}