[解決済み] React インライン スタイル - style prop は文字列ではなく、スタイル プロパティから値へのマッピングを期待します。

質問

Reactアプリケーションでインラインスタイルを設定しようとしています。今回は、spanに対してです。

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>

Reactが教えてくれる。

Uncaught Invariant Violation（捕捉されない不変量違反）。このとき style プロパテ ィは、文字列ではなく、スタイル プロパティから値へのマッピングを期待します。 へのマッピングを期待するもので、文字列ではありません。例えば JSX を使用する場合は、style={{marginRight: spacing + 'em'}} となります。この DOM ノード は `SentenceView' によってレンダリングされました。

意味がよくわかりません。

追記：いろいろなバージョンを試した結果、私がやったのは paddingRight: 5 だけでなく paddingRight: 5 + 'px' だけでなく paddingRight : 5px にもしましたが、成功しませんでした。

どのように解決するのですか？

"を使用してください。 スタイル styleの代わりにquot;prop

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>

W3Schools の素晴らしいリファレンスでは、スタイル情報を持つオブジェクトを作成し、style 属性でそれを参照する方法も紹介されています。 CSSを使用してReactのスタイルを設定する方法に関するリファレンス