Javascript 如何从另一个组件调用组件方法？

我有一个包含按钮的标题组件，我希望这个按钮在单击时显示另一个组件（模式页面）

我可以这样做吗：

下面是我的标题组件：

import ComponentToDisplay from./components/ComponentToDisplay/index'
类头扩展了React.Component{
建造师（道具）{
超级（道具）
}
道具：{
用户：用户
}
_handleInvitePlayerClick=（）=>{
this.refs.simpleDialog.show（）；
}
render（）{
返回(
)
}
}

以下是当单击其他组件上的按钮时应显示的模式页面的我的组件：

class ComponentToDisplay扩展了React.Component{
componentDidMount（）{
}
render（）{
返回(
{“模式内的文本”。}
this.refs.simpleDialog.hide（）}>{“关闭模式”}
)
}
}

用于模式的库：

更像这样：

类头扩展React.Component{
建造师（道具）{
超级（道具）
}
道具：{
用户：用户
}
render（）{
返回(
this.refs.componentToDisplay.showMe（）}>
)
}
}

确保在子组件上公开

showMe（）

方法：

class ComponentToDisplay扩展了React.Component{
showMe（）{
this.refs.simpleDialog.show（）；
}
render（）{
返回(
{“模式内的文本”。}
this.refs.simpleDialog.hide（）}>{“关闭模式”}
)
}
}

---

基本上，这里要做的是将SkyLight的

show（）

方法包装到子组件自己的方法中（在本例中为

showMe（）

）。然后，在父组件中向包含的子组件添加一个ref，以便引用它并调用该方法。

您应该将

ref

道具添加到

组件中以显示
，以便至少在
this.refs
下注册，你应该在点击时更新一个状态，并将其作为一个道具传递给你的对话框，这样它就可以决定它是否应该渲染。可能重复的尼斯谢谢，我被参考文献弄糊涂了，但现在它有意义了，我可以帮上忙。