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

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よりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

TestCafeでのE2EテストをBrowserStackでやろう

ランサーズCTOの横井です。 最近、個人でE2Eの画面テストを書く際にSeleniumからTestCafeに乗り換えつつあります。導入が(個人的には)Seleniumより楽っていうのと、要素の出現とかをよしなに待ってくれるので、テスト書くときにあんまりその辺を …

thumbnail
react.js/redux/webpack/flowtype なプロジェクトでの stylelint の導入手順

こんにちは。森です。 最近コードレビューで「CSS の `:` のあとにスペースがあったりなかったりします」と指摘され、つい悲しくなって stylelint を導入しました。react.js/redux/webpack/flowtype なプロジェクトです。こ …

thumbnail
Expo でフォントのロードが終わってから render するには

森です。今は Expo と ReactNative と NativeBase を使っています。先程体験した問題とその対処を紹介します。 現象 console.error: “fontFamily ‘Ionicons’ is …