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)

为什么会发生这种情况？如何应用字体？

Answer 1

该错误说明了如何解决此问题：

未捕获错误：style道具需要从样式属性到值的映射，而不是字符串。 例如，使用JSX时style={{marginRight: spacing + 'em'}}。此DOM节点由Nav呈现。

元素的style prop期望一个对象具有与CSS属性及其值对应的键和值：

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

请记住，属性键不能包含-和React camelCases CSS属性名称，因此font-family变为fontFamily。

作为旁注：我更喜欢在JSX之外声明的对象，因此它不是内联的，而且它更有条理（在我看来）。另一种方法是在JavaScript中使用CSS样式表而不是样式。

如何将样式应用于Bootstrap React元素？

1 个答案: