へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)! #vZkt8fc6J

Reactで毎回同じclassName書くのありえないしComponent作ってたら似たComponentばっかできたのでまとめるモジュール書いた

デモ

↓ここで動く

WebpackBin

webpack.bin めっちゃ便利。無いと生きていけない

説明

import React from 'react'
import classnames from 'classnames'

const createClassnamesComponent = (CustomTagName, classnamesList) => {
  const accumulator = {}
  classnamesList.reduce(
    (accum, className) => Object.assign(accum, { [className]: true }),
    accumulator
  )

  const ColumnElement = (props) => (
    <CustomTagName className={classnames(
      Object.assign(accumulator, props.className))} {...props} />
  )

  return ColumnElement
}

export default createClassnamesComponent

こんなかんじで書いてみた。クラス名を配列で渡すと、<CustomTagName className={"クラス名"} />ができて、さらにpropsで拡張できるというだけのモジュール

使い方

import React from 'react'
import ReactDOM from 'react-dom'
import createClassnamesComponent from './createClassnamesComponent'

const Button = createClassnamesComponent('button', ['this-is-class', 'another-class'])
const BoldText = createClassnamesComponent('span', ['bold'])

ReactDOM.render(
    <Button onClick={() => alert("Hello!!")}>
      <BoldText>Hello</BoldText>
      <BoldText>Boy</BoldText>
    </Button>,
  document.getElementById("root")
)

こんな感じ。クラス名がうまく隠蔽されたので明らかにノイズが減って見やすい。便利。

この例だと明らかにボタンの中にBoldTextが入っていることがわかる。

↓隠蔽する前

<button className="this-is-class another-class" onClick={() => alert("Hello!!")}>
  <span className="bold">Hello</span>
  <span className="bold">Boy</span>
</button>

「buttonがあって、classNameがあるな。spanがあって、これはboldか。だからこれはボタンの中にboldクラスがついたspanタグがあるのか」ってなる

そんなの考えたくない。どうしたんだclassName、なんのためのReactだーーーーーー!!!ってなる

感想

こういうメタっぽいことが手軽にできるJSはやっぱりナンバーワン!!!!!!!

探せばすでにnpmにあるような気もするけどこまけえこたあいいんだよ