反応エラー18行目:スタイルプロップ値はオブジェクトreact/style-prop-objectでなければなりません

画像の周囲にテキストを折り返そうとしていますが、次のコードを使用するとします。

<div className="container">
         swimmer
         
This is where the other text goes about the swimmer

</div>

これで style = "float:left" がhtml 5であることがわかりました。ただし、次のコードを使用した場合は、

<div className="container">
         swimmer
            
This is where the other text goes about the swimmer

</div>

できます! Reactでスタイルを使用できないのはなぜですか?

1
nl ru de

4 答え

doc から:

style 属性は、キャメルケースのプロパティ( style = {{float: 'left'}}ではなくJavaScriptオブジェクトを受け入れます。 CSS文字列( style = "float:left"これはDOMスタイルのJavaScriptプロパティと一致しており、より効率的であり、XSSセキュリティホールを防止します。

だからあなたはそれを書く必要があります:

swimmer
1
追加された
貢献してくれたすべての人に感謝します。スタイルをオブジェクトとして扱います。
追加された 著者 AltBrian,

問題は、 Object ではなく String としてスタイルを渡すことです。 Reactはあなたがオブジェクト記法でstyleを渡すことを期待しています:

style={{ float:`left` }} //Object literal notation

または別の方法は次のようになります。

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

<div style={divStyle}>  //Passing style as an object

See the documentation for more info

0
追加された

You can still use style in react. Try : style={{float: 'left'}}

0
追加された

DOMスタイルのJavaScriptプロパティを使用できます。このような :

const imgStyle = { 幅: '300px'、 高さ: '300ピクセル'、 float: '左'  

そしてテンプレート:

The documentation React : DOM elements

0
追加された
React.js — 日本のコミュニティ[ja]
React.js — 日本のコミュニティ[ja]
3 参加者の

このグループではReact.jsについて話します。 パートナー:kotaeta.com