【React】子供のメソッドを親から呼びたい!!ref/refs使ったら「Uncaught Invariant Violation: addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s `render` method, or you have multiple copies of React loaded」

2016年9月1日

【React】子供のメソッドを親から呼びたい!!ref/refs使ったら「Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded」

親のコンポーネントからレンダー内で読み込んでいる子コンポーネント内のメソッドを呼びたいのですが、
上のようなエラー出ることがあります。

Referrence
https://facebook.github.io/react/warnings/refs-must-have-owner.html
https://facebook.github.io/react/tips/expose-component-functions.html

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded

解決策の一つにこのようなのがあります。

参照したいrender内のreturn内にあるChildComponentに
このようにして、

[code language="javascript"]
<ChildComponent ref={(child) => this.child = child} />
[/code]

ref={(child) => this.child = child}
として、

呼び出す側のメソッド内で、子供にある「_callParent」を呼びたかったら
こう。

[code language="javascript"]
_hoge() {
this.child._callParent();
}
[/code]

this.childが子供のコンポーネント内への参照になります。
これで親から子供のインスタンスメソッドが呼べる。

解決記事
https://stackoverflow.com/questions/32502165/react-cant-call-a-function-inside-child-component

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

関連記事