web-dev-qa-db-ja.com

Reactjs-インラインスタイルを正しく設定する

Reactjsを剣道スプリッターで使用しようとしています。スプリッターには次のようなスタイル属性があります

style="height: 100%"

Reactjsでは、物事を正しく理解していれば、インラインスタイルを使用してこれを実装できます

var style = {
  height: 100
}

ただし、Dustin Getz jsxutil を使用して、部分をもう少し分割し、独立したHTMLフラグメントを作成しようと試みています。これまでのところ、次のhtmlフラグメント（splitter.html）があります。

<div id="splitter" className="k-content">
  <div id="vertical">
    <div>
      <p>Outer splitter : top pane (resizable and collapsible)</p>
    </div>
    <div id="middlePane">
      {height}
      <div id="horizontal" style={height}>
        <div>
          <p>Inner splitter :: left pane</p>
        </div>
        <div>
          <p>Inner splitter :: center pane</p>
        </div>
        <div>
          <p>Inner splitter :: right pane</p>
        </div>
      </div>
    </div>
  <div>
  <p>Outer splitter : bottom pane (non-resizable, non-collapsible)</p>
</div>

そして、このhtmlを次のように参照するsplit.jsコンポーネント

define(['react', 'external/react/js/jsxutil','text!internal/html/splitter.html'],
  function(React, jsxutil, splitterHtml) {
    'use strict';
    console.log('in app:' + splitterHtml);
    return React.createClass({

      render: function () {
        var scope = {
          height: 100
        };
        console.log('about to render:' + scope.height);

        var dom = jsxutil.exec(splitterHtml, scope);
        console.log('rendered:' + dom);
        return dom;
      }    
    });
  }
)

これを実行すると、コンテンツとして配置すると高さが正しく表示されます。しかし、スタイルプロパティとして実行するとエラーが発生します

The `style` prop expects a mapping from style properties to values, not a string.

だから、明らかに正しくマッピングされていない。

誰かがこれを修正するために私に操縦を与えることができれば、私は本当に感謝しています。

javascripthtmlreactjs
52
Simon Woods

これを行う必要があります：

var scope = {
     splitterStyle: {
         height: 100
     }
};

そして、このスタイルを必要な要素に適用します。

<div id="horizontal" style={splitterStyle}>

あなたのコードでこれをやっています（これは間違っています）：

<div id="horizontal" style={height}>

どこheight = 100。

32
Gohn67

次のように、変数を使用せずにインラインでstyleを設定することもできます。

style={{"height" : "100%"}}または、

複数の属性の場合：style={{"height" : "100%", "width" : "50%"}}

126
myusuf

documentation から次のことがうまくいかない理由はすぐにはわかりません。

<span style={font-size: 1.7} class="glyphicon glyphicon-remove-sign"></span>

しかし、完全にインラインで行う場合：

  • 二重中括弧が必要です
  • 値を引用符で囲む必要はありません
  • "em"を省略すると、Reactはデフォルトを追加します
  • CSSにダッシュがあるキャメルケーススタイル名を忘れないでください。 font-sizeはfontSizeになります：
  • classはclassNameです

正しい方法は次のようになります。

<span style={{fontSize: 1.7 + "em"}} className="glyphicon glyphicon-remove-sign"></span>
11
user1641172

正しいより明確な方法は次のとおりです。

<div style={{"font-size" : "10px", "height" : "100px", "width" : "100%"}}> My inline Style </div>

次のアプローチにより、より簡単になります。

// JS
const styleObject = {
      "font-size" : "10px",
      "height" : "100px",
      "width" : "100%"
}

// HTML    
<div style={styleObject}> My inline Style </div>

インラインstyle属性にはオブジェクトが必要です。したがって、それは{}で記述され、デフォルトのリアクション標準の1つである{{}}になります。

0
Sangwin Gawande