React.js how to call child component method without using refs?

Question

I have an unusual case. Let say, I have a form. When the user clicks the "save" button I need to trigger a component's method to convert draft.js content to HTML. Normally I just use refs to get access to child and call any method. But in my case draft component is inside render method of react-router v4 and appears only when URL match pattern. This is a hindrance cuz when I define ref

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

parent component doesn't have this 'editor' in refs. What can i do to call method on from parent ?

score 1 · Answer 1 · edited May 23 '17 at 12:25

1

One way is as follows.

1) Find the DOM node for the parent element using:

var parentDOM = ReactDOM.findDOMNode(parentCompInstance);

2) Find the DOM node for the child element, using:

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

3) Find the React component instance for that child DOM node, using the solution mentioned here: React - get React component from a child DOM element?

edited May 23 '17 at 12:25

Community

1
1

answered Mar 21 '17 at 10:29

Venryx

15,624
10
70
96

Thanks. I didn't know about such an ability of react – Pavel Poberezhnyi Mar 22 '17 at 00:55

score 0 · Accepted Answer · answered Mar 10 '17 at 12:46

I found solution for my case. Unfortunate, the solution is using ref but it performs it with other approach. Instead of making this ref='editor' I did this ref={(draft) => this.aboutEditor = draft}. This editor will be available as this.aboutEditor. When i operated with ref as string it did't works. But it works fine as callback function.

React.js how to call child component method without using refs?

2 Answers2