Блог

В моем приложении React я экспортирую таблицу html в Excel, сохраняя отображаемый HTML-код (который Excel знает, как открыть) в файл. Я также пытаюсь установить свойство стиля ‘mso-number-format’ для каждого <td> , чтобы указать Excel, какой числовой формат использовать для каждой ячейки. Однако React не нравится этот код:

 <td style={{ 'mso-number-format': '\@' }}
  

В консоли он регистрирует:

 Unsupported style property mso-number-format. Did you mean msoNumberFormat? Check the render method of `ComponentX`.
  

Есть ли способ обойти это, не обходя DOM и вручную сделать что-то вроде:

 node.setAttribute('style', 'mso-number-format: \@')
  

Атрибуты стилей в React JSX записываются в нотации camelCase, а не так, как вы определили. Определите его следующим образом

 <td style={{ 'msoNumberFormat': '@' }}>
  

В документах в react говорится следующее

В React встроенные стили не задаются в виде строки. Вместо этого они задаются с помощью объекта, ключ которого является версией имени стиля в формате camelCased, а значение — значением стиля, обычно строкой

Ключи стиля имеют формат camelCase, чтобы быть совместимыми с доступом к свойствам на DOM-узлах из JS (например, node.style.BackgroundImage). Префиксы поставщиков, отличные от ms, должны начинаться с заглавной буквы. Вот почему WebkitTransition имеет заглавную букву «W».

Документы по встроенным стилям

как предлагает вам react, и это решит вашу проблему.

Также я думаю, что это должно быть @ вместо \@ форматирования текста.

Вы также можете попробовать это как

 var styles = {
    msoNumberFormat: '@'
}

<td style={styles}>