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>

и компонент splitter.js, который ссылается на этот HTML-код следующим образом

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.

Так что я, очевидно, не совсем правильно сопоставил его.

Я был бы очень признателен, если бы кто-нибудь помог мне исправить это.

Ответ 1

Вам нужно сделать это:

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

И затем примените этот стиль к требуемым элементам:

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

В коде вы делаете это (что неверно):

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

Где height = 100.

Ответ 2

Вы также можете попробовать установить style inline без использования переменной, например:

style={{"height" : "100%"}} или,

для нескольких атрибутов: style={{"height" : "100%", "width" : "50%"}}

Ответ 3

Из документации не сразу понятно, почему не работает следующее:

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

Но при этом полностью встроенный:

Вам нужны двойные фигурные скобки
Вам не нужно указывать свои значения в кавычках
React добавит некоторые значения по умолчанию, если вы опустите "em"
Не забывайте о именах стилей camelCase, которые имеют черты в CSS - например, размер шрифта становится fontSize:
class - это className

Правильный путь выглядит следующим образом:

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

Ответ 4

Правильный и более понятный способ:

<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 ожидает объект. Следовательно, оно написано в {}, и оно становится двойным {{}}, так как оно является стандартом реакции по умолчанию.