Question

在我的React应用程序中，我通过将呈现的html（Excel知道如何打开）保存到文件，将html表导出到Excel。我还试图在每个<td>上设置'mso-number-format'样式属性，告诉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: \\@')

Answer 1

React JSX中的样式属性是用camelCase表示法编写的，而不是像你定义的那样。像

一样定义它

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

反应中的文档说明了这个

在React中，内联样式未指定为字符串。相反，他们   使用一个对象来指定，该对象的键是camelCased版本的   样式名称，其值为样式的值，通常为字符串

样式键是camelCased，以便与访问它一致   来自JS的DOM节点上的属性（例如node.style.backgroundImage）。   除ms之外的供应商前缀应以大写字母开头。这个   这就是为什么WebkitTransition有一个大写＆＃34; W＆＃34;。

Inline styles docs

反应建议你，它将解决你的问题。

另外，我认为文本格式应该是\@而不是\\@。

您也可以尝试

var styles = {
    msoNumberFormat: '\@'
}

<td style={styles}>

在React中使用自定义外部样式属性

1 个答案: