web-dev-qa-db-ja.com

Reactレンダリング時のJSXスタイルタグエラー

これは私の反応レンダー関数render：function（）{

  return (
          <div>
                <p className="rr">something</p>


                  <style>
                    .rr{
                      color:red;
                    }
                  </style>
          </div>    
        )
}

これにより、「JSX：Error：Parse Error：Line 22：Unexpected token：」というエラーが表示されます

ここで何が問題なのですか？完全な通常のCSSを反応コンポーネントに埋め込むことはできますか？

cssreactjsreact-jsx
35
user48545

JSXはjavascriptの小さな拡張であり、独自の本格的なテンプレート言語ではありません。あなたはjavascriptのようにそれをするでしょう：

        return (<div>
            <p className="rr">something</p>


              <style>{"\
                .rr{\
                  color:red;\
                }\
              "}</style>
      </div>)

http://jsfiddle.net/r6rqz068/

しかし、これを行う理由はまったくありません。

33
Esailija

Es6テンプレート文字列で簡単に実行できます（改行が許可されます）。レンダリングメソッドで：

const css = `
    .my-element {
        background-color: #f00;
    }
`

return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

ユースケースに関しては、デバッグのために使用しているいくつかのチェックボックスを持つdivに対してこれを行っています。後で簡単に削除できるように1つのファイルに含めたいと思います。

50
Sebastian

インラインスタイルは、コンポーネントJSXテンプレートに直接適用するのが最適です。

return (
  <div>
    <p style={{color: "red"}}>something</p>
  </div>
);

デモ： http://jsfiddle.net/chantastic/69z2wepo/329/

注：JSXは、スタイル属性のHTML構文をサポートしていません

キャメルケースのプロパティ名を使用してプロパティを宣言します。

{ color: "red", backgroundColor: "white" }

ここでさらに読む： http://facebook.github.io/react/tips/inline-styles.html

23
chantastic

「クラス」はJavaScriptの予約語です。代わりに「className」を使用してください。

また、HTMLではなくJSXを使用していることを覚えておく必要があります。 jsxがタグを解析するとは思わない。より良い方法は、スタイルを使用してオブジェクトを作成し、それをスタイルとして適用することです（以下を参照）。

var styles = {
  color:"red";
}

return (
  <div>
    <p style={styles}>something</p>
  </div>    
)
9
Tyler McGinnis
  1. スタイルタグの挿入を処理する関数を作成します。
  2. 目的のCSSを文字列変数に追加します。

  3. <style>タグ内の返されたJSXに変数を追加します。

    renderPaypalButtonStyle() {
    let styleCode = "#braintree-Paypal-button { margin: 0 auto; }"
    return (
        <style>{ styleCode }</style>
    )
}
5
Michael J. Calkins

これは、次のようにバックティック「 `」を使用して行うことができます

return (<div>
        <p className="rr">something</p>


          <style>{`
            .rr{
              color:red;
            }
          `}</style>
  </div>)
4
Kamran Syed

これは私がやったことです：

  render(){
    var styleTagStringContent = 
    ".rr {"+
       "color:red"+
    "}";
    return (
      <style type="text/css">
        {styleTagStringContent}
      </style>
    );
1
Con Antonakos