React JSX className に変数と固定値を混ぜて使いたい - かもメモ
ReactのJSXでクラス名を付ける時に変数と固定値な文字列を一緒に使いたいとき コレはうまくいかない return ( <button className="btn btn-${btnState}">BUTTON</button> ); 文字列結合する function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={'btn btn-' + btnState}>BUTTON</button> ); } テンプレート構文 (ES2015)を使う function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={`btn
【JS】Reactのstyleの使い方、書き方いろいろ | JavaScriptに関するお知らせ
こんにちは！雨の日はReact。Mizutani(@sirycity)です。 今日はreact(というかJSX)にCSSを適用する時に使うstyleについてです。styleは無駄にいろんな書き方があるので順番に色々見ていきましょうね 概要 一番簡単な書き方はこう。 <div style={{ color: 'red' }}>りんご</div> style={{ CSSのプロパティ: 'CSSの値' }} みたいな感じ。簡単だね。2つあるブレース{{}}はこんな感じに理解するといいと思う↓ 外側のブレースは「この中にJavaScriptを書く」って意味 内側のブレースはJavaScriptのオブジェクトを表す って感じ。 初級編 styleに書くのは基本的にはcssと一緒。だけどいくつか注意点があります。 まずひとつ目。CSSの値はクォートで囲もう。囲まないとCSSの変数扱いになるからね。こ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
