Labels:  JavaScript 投稿者：mori-dev

React コンポーネントで自分の子要素を取得するときのイディオム

2017.05.25

• いいね！ 0
• ツイート 1
• B! はてブ 1

森です。

課題

React コンポーネントで自分の子要素を取得するときに、ref=”payjpCheckoutRef” などと指定しておいて、findDOMNode(this.refs.payjpCheckoutRef) していたら、eslint で警告がでていた（のをつまらないしめんどくさいからコメントをつけてやりすごしていた）。ref=”payjpCheckoutRef” に対しては、Using string literals in ref attributes is deprecated、 findDOMNode(this.refs.payjpCheckoutRef) に対しては、Using string literals in ref attributes is deprecated 。

対策

ビフォー

componentDidMount() {
this.payjpCheckoutRef = findDOMNode(this.refs.payjpCheckoutRef);
this.payjpCheckoutRef && this.payjpCheckoutRef.appendChild(this.script);
}

render() {
return <div ref=”payjpCheckoutRef”></div>;
}

アフター

componentDidMount() {
// this.payjpCheckoutRef に ref で指定した要素が格納されている
this.payjpCheckoutRef && this.payjpCheckoutRef.appendChild(this.script);
}

render() {
return <div ref={node => this.payjpCheckoutRef = node}></div>;
}

元ネタ

gaearon さんの findDOMNode 批判が有益でした。

• https://github.com/yannickcr/eslint-plugin-react/issues/678#issue-165177220

宣伝

ランサーズの新規事業 pook では、Wantedly に正社員希望の Rails エンジニアの求人を出しています。

• https://www.wantedly.com/projects/97023