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

Reactアプリケーションでインラインスタイルを設定しようとしています。この場合、スパンに対して

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

リアクトが教えてくれる：

Uncaught Invariant Violation：style」プロップは、「style」プロップからのマッピングを期待します。 スタイルプロパティを文字列ではなく、値にする。例えば、以下のような感じです、 style={{marginRight: spacing + 'em'}} JSXを使用する場合。このDOMノード SentenceViewでレンダリングされました。

その意味がよくわからない。

PS:違うバージョンも試したので、paddingRight: 5だけでなく、paddingRight: 5 + 'px' や paddingRight : 5px もやってみましたが、成功はしませんでした！

Viktor Seč
編集された質問 12日 4月 2017 в 12:53
プログラミング
javascript css reactjs
12日 4月 2017 в 9:46
4 ビュー
ソリューション

スタイルの代わりに "styles" prop を使用します。

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
Aximili
編集した答え 29日 1月 2019 в 5:12
解説 (5)

React Componentsのスタイルを設定するには、いくつかの方法があります。

https://facebook.github.io/react/docs/context.html

https://github.com/facebookincubator/create-react-app

  1. className="your-class-name" を使用する。

  2. style={css_object}または style={{color: this.props.color}} を使用する。

React REPL

https://jscomplete.com/repl

1 className & stylesheet.css.

解説 (2)

以上、reactでインラインスタイルを定義し、使用する方法について説明しました。

/**
 * Style definitions.
 */
const STYLE = {
    infoColor: {
        color: 'green'
    },
    warningColor: {
        color: 'orange'
    },
    errorColor: {
        color: 'red'
    }
};

/**
 * Component
 */
class Welcome extends React.Component {

    /**
     * Rendering into the DOM.
     */
    render() {
        return (
            <div>
                <h2 style={STYLE.infoColor}>Welcome!</h2>
        )
    }
}
解説 (1)

JSXとHTMLは異なります。 [。![JSXとHTMLの違い][2]][2]。

HTMLではそうです。


< div style = "background-color:red;">< / div>。
``。
JSXで書きます。
``` jsx。
< div style = {{backgroundColor: 'red'}}>< / div>。
``。
条件付きインラインフォーマットは両方で異なります。

  [1]:https://i.stack.imgur.com/PnrAf.png。
  [2]:https://i.stack.imgur.com/VcHJB.png。
Vaibhav Vishal
編集した答え 12日 8月 2019 в 3:07
解説 (1)

< span style = {backgroundColor: "red"、fontWeight: "bold"、fontSize:50} >。 {{{}}}を二重引用符または文字列で包まないでください。

解説 (0)