ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  JavaScript 投稿者:mori-dev

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

です。

課題

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 批判が有益でした。

宣伝

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

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア

【新卒採用・その他】
21・22新卒
その他採用情報

関連記事

thumbnail
Webpack で git 管理してもよいような環境ごとに値の異なる定数を設定する方法

森です。仕事でのちょっとしたコミットをブログ記事化するシリーズです。今日は Webpack の話題です。 課題 環境ごとに値の異なる定数として、git で管理できるものと git で管理すべきではないものがあります。後者は dotenv と Webpack の …

React入門 2018

@takepo です。 先日、【サポーターズ勉強会】React入門 というイベントで登壇させていただきました。 その登壇の際のスライドをあげさせていただきます。 内容はReact初心者向けのものになっていてコードサンプル付きで説明させていただきました。 Rea …

ランサーズ開発合宿2019 GASとSmartHR APIで業務効率化

みなさんこんにちは。 ランサーズでインターンをしている神谷(GunjiKamiya)です。 自身初投稿となる今回の記事では、自分が参加したLancers開発合宿2019でのことについて書いていこうと思います。 Lancersの開発部では、1年に一度大都会東京を …