Reactでカスタム外部スタイルプロパティを使用する

Question

私のReactアプリケーションでは、レンダリングされたhtml（Excelの開く方法を知っている）をファイルに保存して、htmlテーブルをExcelにエクスポートしています。私はまた、それぞれの<td>に 'mso-number-format'スタイルプロパティを設定して、Excelにセルごとに使用する数値書式を教えようとしています。しかし、このコードは好きではないリアクト：コンソールで

<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表記で記述されており、定義したとおりではありません。反応は、Inが反応この

を言うに

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

のようなドキュメントを、それを定義し、インラインスタイルは、文字列として指定されていません。代わりに、彼らは は

スタイルキーがオンに プロパティにアクセスすると一致するためにはcamelCase形式されている文字列は通常、そのキー のcamelCase形式のバージョンは、スタイル名であり、その値は、スタイルの値であるオブジェクトで指定されていますJSのDOMノード（node.style.backgroundImageなど） ms以外のベンダープレフィックスは、大文字で始まる必要があります。この は、WebkitTransitionに大文字の "W"が付いている理由です。

Inline styles docs

反応するようにあなたを示唆し、それはあなたの問題を解決します。

また、\\@の代わりに\@にする必要があります。

また、この問題に関する

var styles = { 
    msoNumberFormat: '\@' 
} 

<td style={styles}>