Вариант использования: я вкладываю 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 таким образомкак обойти проверку стиля?