React.js 如何在不使用 refs 的情况下调用子组件方法？答案

【问题标题】：React.js how to call child component method without using refs?React.js 如何在不使用 refs 的情况下调用子组件方法？
【发布时间】：2017-07-29 19:42:27
【问题描述】：

我有一个不寻常的案例。比方说，我有一个表格。当用户单击“保存”按钮时，我需要触发组件的方法来将 Draft.js 内容转换为 HTML。通常我只是使用 refs 来访问 child 并调用任何方法。但在我的情况下，草稿组件位于 react-router v4 的 render 方法中，并且仅在 URL 匹配模式时出现。当我定义 ref 时，这是一个障碍

<Match pattern={'/info'} render={(props)=> <Draft_Editor ref='editor' />} />

父组件在 refs 中没有这个“编辑器”。我该怎么做才能从父级调用方法？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

一种方法如下。

1) 使用以下方法查找父元素的 DOM 节点：

var parentDOM = ReactDOM.findDOMNode(parentCompInstance);

2) 找到子元素的 DOM 节点，使用：

var childDOM = parentDOM.children[0]; // or something like this, depending on html hierarchy

3) 使用此处提到的解决方案找到该子 DOM 节点的 React 组件实例：React - get React component from a child DOM element?

【讨论】：

谢谢。我不知道有这样的反应能力

【解决方案2】：

我找到了适合我的情况的解决方案。不幸的是，该解决方案使用ref，但它使用其他方法执行它。我没有做这个ref='editor'，而是做了这个ref={(draft) => this.aboutEditor = draft}。此编辑器将以this.aboutEditor 的形式提供。当我使用ref 作为字符串进行操作时，它不起作用。但它作为回调函数工作正常。

【讨论】：