1. ホーム
  2. css

[解決済み] 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

自分の質問に答えてくれた :)