Вложение XML в React, где XML-схема имеет недопустимую разметку React - PullRequest
0 голосов
/ 01 марта 2019

Вариант использования: я вкладываю Google Blockly внутри компонента React.У меня есть динамически определенный Блочный набор инструментов , и я использую React для его построения.

Сложный фактор: Блочно требует, чтобы наборы инструментов были определены как XML где-то в документе.Эти наборы инструментов выглядят примерно так:

<xml id="toolbox" style="display: none">
  <category name="Control" style="controls_category">
    <block type="controls_if"></block>
    <block type="controls_whileUntil"></block>
    <block type="controls_for">
  </category>
  <category name="Logic" style="logic_category">
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_boolean"></block>
  </category>
</xml>

Попытка решения: иметь компонент React Blockly для набора инструментов, который возвращает теги категорий и блоков в рендере.Обойти ошибки «нераспознанный тег» с помощью React.createElement.

Проблема: теги категории используют тег style и ожидают текстовое значение, соответствующее используемому стилю категории.Тем не менее, проверка React для свойства prop вызывает следующую ошибку:

react-dom.development.js:55 Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Вопрос: Как «внедрить» этот XML-код в компонент React таким образомкак обойти проверку стиля?

...