jsx elementが効かない理由。

以下は Button componentに styleとrest　propsを渡して、buttonを出力するコード。

（...restはstyleを除いたButtonのproperties！）

コードを見ると、Button componentにclassNameにbuttonが指定されている状態のため、

const element中のclassName="button"は省いてもいいじゃない？と思って省いてみると

 

<修正前>

＜修正後＞

予想外の出力となった。開発ツールからbuttonを見ると、classからbuttonが見えなくなった。

 

その理由としては、下のログはfunction buttonの...restの中身で、

button className={`button`}と指定していても、次にくるrestにより、上書きされてしまうのが原因。

 

解決するには以下のように！

 

これにより、jsxでは後続の設定値が優先されることが分かる。