React v15のUnknown prop warningにはlodash.omitが便利

Reactをv0.14.xからv15.x.x系にアップデートしたところ、以下のようなWarningが多発するようになった。

Warning: Unknown prop hogefuga on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop for details.

これは、今までは無視されていた未定義のpropを渡してはいけないという仕様が追加されたために発生している。

Unknown Prop Warning | React

これを解消するには、lodashの_.omitを使うと便利。omitは、オブジェクトから指定したキーを除外した結果を返してくれる。

https://lodash.com/docs#omit

omitを使えば、こんな感じで書ける：

import {omit} from 'lodash'

render () {
  const buttonProps = omit(this.props, ['hogefuga'])
  return <button {...props} />
}

ちなみに以下のように分割代入に ... を使って指定されてない残りを取り出す方法はES7からしか使えない。
(参考: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment )

({hogefuga, ...buttonProps} = this.props)

Pocket

Tweet