Question

经过数小时的头脑风暴，我决定向你提问。情况是我使用react-rnd，这是一个可拖动且可调整大小的反应扩展，它是一个包含少量子组件的组件。我现在有这个代码：

    //this component has the property: id
    
    deleteEvent(){
        console.log(this.props.id) //returns undefined
    }
    render(){
        console.log(this.props.id) //returns correct value
        return(
            <Rnd>
                <div onClick={this.deleteEvent}></div>
            </Rnd>
        )
    }

当我看到DOM树时，在反应devtools中，div从该组件向下5级。这对我来说是个大问题。我不想编辑Rnd的组件。如果我为按钮（div）创建一个组件，它没有帮助，因为我仍然需要将id传递给按钮。我考虑过将按钮组件连接到redux，但它仍然不知道它具有哪个id。所以有人帮我请将正确的ID传递给div

Answer 1

必须在您的组件deleteEvent()中声明constructor方法，否则deleteEvent方法将无权访问this

constructor(props){
 super(props)
 this.deleteEvent = this.deleteEvent.bind(this)
}

deleteEvent(){
   console.log(this.props.id) //returns id
}

Answer 2

您必须在构造函数中绑定函数，或者您可以使用箭头函数。

`

deleteEvent = () => {
        console.log(this.props.id) //returns undefined
    }
    render(){
        console.log(this.props.id) //returns correct value
        return(
            <Rnd>
                <div onClick={this.deleteEvent}></div>
            </Rnd>
        )
    }

`

如何从父组件中访问子组件的子进程？

2 个答案: