[解決済み] ReactJSを使ったインラインのフォントサイズスタイルの生成
2022-03-04 10:18:46
質問
ReactJSでこのようなことをやろうとしています。
var MyReactClass = React.createClass({
render: function() {
var myDivText = "Hello!";
var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly
var divStyle = {
font-size: {fontSize + 'px !important;'},
};
return (<div style={divStyle}>{myDivText}</div>);
}
});
問題は、私のコードを実行すると、このエラーが発生することです。
モジュールビルドに失敗しました。Error: Parse Error: 5行目。予期しないトークン -"
どうやら、Reactはこれが気に入らないようです
font-size
にはダッシュが含まれています。これを回避するにはどうしたらいいのでしょうか?reactでその文字をエスケープする方法はありますか?reactがより好む、同じことをする別のcssプロパティがありますか?
ありがとうございます。
解決方法は?
使用方法
fontSize
の代わりに
font-size
解決策は、通常ダッシュを含むキャメルケースのプロパティを使用することです。
http://facebook.github.io/react/tips/inline-styles.html
自分の質問に答えてくれた :)
関連
-
[解決済み] :first-child が期待通りに動作しない
-
[解決済み] テーブルの行にマージンを追加する方法 <tr> [重複]。
-
[解決済み] twitter-bootstrapの@-ms-viewportというタグは何ですか?
-
[解決済み] 入力・テキストフィールドの背景色
-
[解決済み] ブルマのテーブルをレスポンシブにするにはどうしたらいいですか?
-
[解決済み] タグエラーです。React JSX スタイルタグのレンダリング時のエラーについて
-
[解決済み] CSSでレスポンシブフォントサイズを実現
-
[解決済み] Xcodeエディターでフォントサイズを大きくするには?
-
[解決済み] matplotlib のプロットでフォントサイズを変更する方法
-
[解決済み】reactjsで生のhtmlをレンダリングする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】DIVの幅が100%というのは本当の100%ではない
-
[解決済み】ボックスにサイズ/部分的なボーダーを宣言する方法はありますか?
-
[解決済み] 2つのdivを隣り合わせに配置するには?
-
[解決済み] Tailwind CSS - コンポーネントとしてのレスポンシブブレークポイント
-
[解決済み] Bootstrap 4のナバーボタンのアイコンの色を変更するにはどうすればよいですか?
-
[解決済み] Bootstrapコンテナが複数またはネストされていませんか?
-
[解決済み] JavaFX Labelの文字色を変更する方法
-
[解決済み] bootstrapのチェックボックスの色を変更するには?
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] ReactJSを使ったインラインのフォントサイズスタイルの生成