子组件未调用父组件函数

所以我有一个父组件和一个子组件。我在父组件中有一个函数，我已经绑定到父组件并将其传递给子组件以供子组件使用。但是，使用该函数的子组件中的 X 按钮无法调用该函数。

在标记重复之前，请查看我的代码，因为我查看了其他帖子，这些帖子不足以解决我的问题。

class SimulatorProgressPopup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {show: props.show, data: props.data};
    }

    componentWillReceiveProps(nextProps) {
        this.setState({show: nextProps.show, data: nextProps.data});
    }

    render() {
        return (<div style={{display: this.state.show, position: "fixed", width: "500px", height:"300px", left:"50%", top:"50%", transform: "translate(-50%, -50%)", border: "1px solid black"}}>
            <button onClick={this.props.close}>X</button>
        </div>)
    }
}

class SingleSimulatorProgress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {showPopup: false, data: props.data};
        this.popup = this.popup.bind(this);
        this.popupClose = this.popupClose.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({data: nextProps.data});
    }

    popup() {
        this.setState({showPopup: true});
    }

    popupClose() {
        this.setState({showPopup: false});
    }

    render() {
        return (<tr onClick={this.popup}>
            <td>{this.state.data.leId.substring(this.state.data.leId.length - 3, this.state.data.leId.length)}</td>
            <td className={this.state.data.status}>{this.state.data.status}</td>
            <td>{this.state.data.noOfFailedRequest}</td>
            <td>{this.state.data.requestSent}</td>
            <td>{this.state.data.responseReceived}</td>
            <td>{this.state.data.failureRate}</td>
            <td>{this.state.data.avgReqLatencyInMilis}</td>
            <SimulatorProgressPopup show={this.state.showPopup ? "block" : "none"} data={this.state.data} close={this.popupClose}/>
        </tr>)
    }
}