前置き
JSXを利用している場合、class属性を利用することはできない。
これはclassキーワードがJavaScriptの予約語になっており、JavaScript のソースコード内利用できないため。
なので通常はclassNameとして次のように書く。
import React from "react";
export default (props) => <button className="button" {...props} />;
babel-plugin-react-html-attrsを入れてclassName属性を不使用とする
どうしてもclassName属性を使いたくない人向けにbabel-plugin-react-html-attrsを導入する。
npm install --save-dev babel-plugin-react-html-attrs
webpack.config.jsのoptionsの位置に追記する
webpack.config.js
loader: 'babel-loader',
options: {
+ plugins: ['react-html-attrs'],
presets: ['@babel/preset-react', '@babel/preset-env']
}
とすることで、コンポーネントも次のようにclass属性をつかってHTMLライクに書ける
<Link to="archives"><button class="btn btn-danger">archives</button></Link>
<Link to="settings"><button class="btn btn-success">settings</button></Link>
おわり