如何在反应中从父组件访问子组件的子组件？答案

【问题标题】：How to access child component's child from parent component in react?如何在反应中从父组件访问子组件的子组件？
【发布时间】：2018-06-15 19:43:28
【问题描述】：

经过数小时的头脑风暴，我决定向您提出这个问题。情况是我使用 react-rnd，它是 react 的一个可拖动和可调整大小的扩展，它是一个带有几个子组件的组件。我现在有这个代码：

    //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 树时，在 react devtools 中，div 比这个组件低 5 级。这对我来说是个大问题。我不想编辑 Rnd 的组件。如果我为按钮（div）创建一个组件，它没有帮助，因为我仍然需要将 id 传递给按钮。我考虑过将按钮组件连接到redux，但它仍然不知道它有哪个id。所以有人帮我把正确的 id 传递给 div

【问题讨论】：

在你的构造函数中，你有这个this.deleteEvent = this.deleteEvent.bind(this)
不，我之前没用过这个方法。它会解决我的问题吗？
尝试将按钮创建为组件并使用 React 的新功能：reactjs.org/docs/context.html，将父组件包装在上下文中并将 id 属性传递到按钮中

标签： javascript reactjs redux

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>
        )
    }

【讨论】：