1

Primitives support (for) styled components令人兴奋......安装后我在浏览器中收到此错误：

TypeError: __WEBPACK_IMPORTED_MODULE_1_styled_components_primitives___default.a.div is not a function
Object.__webpack_exports__.a
src/App.js:13
  10 | })
  11 | 
  12 | //const styled = styled.default;
> 13 | const Body = styled.div`

仅当将 import 设置为 import styled from 'styled-components' 时才会显示此错误运行 create-react-app 后。

应用程序.js

import React from 'react'
import styled from 'styled-components/primitives'
import WebFont from 'webfontloader'


WebFont.load({
  google: {
    families: ['Bungee+Shade', 'Roboto', 'Nixie+One', 'Muli']
  }
})

//const styled = styled.default;
const Body = styled.div`

安装/s 似乎没问题？？？

纱线添加样式组件反应基元

yarn add v0.24.5
[1/4] Resolving packages...
[2/4] Fetching packages...
warning fsevents@1.0.17: The platform "linux" is incompatible with this module.
info "fsevents@1.0.17" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "0.24.6" while you're on "0.24.5".
info To upgrade, run the following command:
$ npm upgrade --global yarn
success Saved 2 new dependencies.
├─ react-primitives@0.4.2
└─ styled-components@2.1.0
Done in 118.88s.
4

2 回答 2

1

styled-component/primitives在后台使用react-primitives以允许您创建真正可重用的组件，如下所示：

const Wrapper = styled.View`
  color: blue;
`

这个<Wrapper />组件现在可以在 Web 上、在 ReactNative 中使用，甚至可以渲染到 Sketch！

如您所见，我在那里写了View，而不是div. 那是因为react-primitives选择使用 ReactNative 原语的子集作为底层重用单元，特别是这四个 API 导出为styled.Xfrom styled-components/primitives：

  • styled.View: 布局的基础组件。
  • styled.Text：文本渲染的基础组件。
  • styled.Image：图像渲染的基础组件。
  • styled.Touchable: 交互的基础组件。

要使用styled-components/primitives，您必须使用这四个原语来构建您的组件。如果你想使用标准的 HTML 标签并且只构建一个 web 应用程序，你应该使用styled-components正确的，但是这些组件在 ReactNative 上是不可重用的。

要了解有关styled-components/primitives阅读我们的公告博客文章react-primitives的更多信息，有关Leland 选择这些确切 API 以及为什么选择这些确切 API的更多信息，请观看他在 ReactEurope 上的精彩演讲！

于 2017-06-29T21:10:54.110 回答
-1

一个快速的解决方法是，用一个部分替换 div。改用 styled.section``

于 2021-01-07T09:36:25.000 回答