React:如何导入创建React元素的节点模块？
React:如何导入创建React元素的节点模块？
提问于 2020-06-10 21:32:09
我有两次回复：
- 我的主要网络应用程序
- 我的共享组件库，通过package.json作为节点模块导入
他们两人都用反应。在我的主web应用程序中，我只是直接导入共享组件库的组件文件，如下所示：
Switch.js (在我的共享组件库中)
import React from 'react';
import { Switch } from 'antd';
import styled from 'styled-components';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
const StyledSwitch = styled(Switch).attrs({
checkedChildren: <CheckOutlined />,
unCheckedChildren: <CloseOutlined />
})``;
export default StyledSwitch;我的主要网络应用程序：
import Switch from 'my-shared-component-lib/components/Switch';
但是，我得到了这个错误：
../my-shared-component-lib/components/Switch.js
SyntaxError: /Users/edmundmai/Documents/src/my-shared-component-lib/components/Switch.js: Unexpected token (9:19)
7 |
8 | const StyledSwitch = styled(Switch).attrs({
> 9 | checkedChildren: <CheckOutlined />,
| ^
10 | unCheckedChildren: <CloseOutlined />
11 | })`
12 | &.ant-switch {有什么东西我必须安装，以便我的进口将工作？
回答 1
Stack Overflow用户
发布于 2020-06-10 22:11:00
我认为您不能以这种方式使用React组件作为对象值：
{
checkedChildren: <CheckOutlined />,
unCheckedChildren: <CloseOutlined />
}对于对象值的开始，<不是有效的语法(因此出现了“意外令牌”错误)。
您可能想尝试的是使用由Prop Factory提供的styled-components，例如：
const StyledSwitch = styled(props => <Switch
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
{...props}
/>)``;我还没有使用styled-components库，但是我认为它应该基于我在这个代码沙箱中看到的(从Ant的交换机文档中派生出来的这个官方例子 )来工作。
这里有一个来自评论的styled-components GitHub问题，可能也值得一看。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62313469
复制相关文章
相似问题
腾讯云开发者
