Bootstrap Reactエレメントにスタイルを適用するにはどうしたらいいですか？

Question

以下は、私のアプリケーション用のReactJSコンポーネント内でレンダリングされ、nav.jsxとして保存された行です。

<span style="font-family: 'Open Sans', sans-serif;">&nbsp;Home</span> 

例外：

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. This DOM node was rendered by `Nav`. 
    at invariant (react.js:18354) 
    at assertValidProps (react.js:6435) 
    at ReactDOMComponent.mountComponent (react.js:6678) 
    at Object.mountComponent (react.js:12978) 
    at ReactDOMComponent.mountChildren (react.js:11692) 
    at ReactDOMComponent._createContentMarkup (react.js:6815) 
    at ReactDOMComponent.mountComponent (react.js:6703) 
    at Object.mountComponent (react.js:12978) 
    at ReactDOMComponent.mountChildren (react.js:11692) 
    at ReactDOMComponent._createContentMarkup (react.js:6815) 

なぜこれが起こっているとどのように私はフォントを適用することができますか？要素のためのstyle小道具は、CSSのプロパティとその値に対応するキーと値を持つオブジェクトを期待し

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. This DOM node was rendered by Nav .

：

<span style={{fontFamily: "'Open Sans', 'sans-serif'"}}>&nbsp;Home</span> 

は、そのプロパティを覚えてどのようにこの問題を解決するには

Answer 1

エラー状態キーには-を含めることはできません。そのキーにはCamelCasesのCSSプロパティ名を入力してください。font-familyはfontFamilyになります。サイドノートとして

---

：それはインラインではありません、それは（私の意見では）より組織ですので、私は、JSX外で宣言されたオブジェクトを好むだろう。別の方法は、JavaScriptでスタイルの代わりにCSSスタイルシートを使用することだけです。