TS2604:将“material-ui”按钮从一个包导入到另一个包时
TS2604:将“material-ui”按钮从一个包导入到另一个包时
提问于 2019-04-11 03:22:07
我的团队正在为我们的应用程序实现一个新的前端，并决定从标准的react切换到typescript。我在开发方面相当新手，已经被这个问题困扰了好几天了。从本质上讲，我们有两个存储库，一个用来保存我们的组件，另一个用来将它们绑定在一起作为前端应用程序。我们通过lerna/yarn链接将它们连接起来。
我面临的问题在于从其他库导入我们版本的material-ui按钮组件时，也适用于其他几个组件。执行此操作时，它无法编译。
组件库中的代码可以正确编译。但是，只有在将其导入到其他应用程序时，我们才会收到此错误。
我尝试过几种方法来解决这个问题，首先在组件的dist/文件夹中修改Button.d.ts文件，更改导出的ReactComponent的类型，将接口更改为类等。其次，修改tsconfig.json以包括通过文档调整多个可用选项，更改"types“路径等。
下面是我认为是组件库中相关文件的：
Button.d.ts:
import React from 'react';
import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
export interface ButtonProps extends MuiButtonProps {
defaultMargin?: boolean;
classes: {
root: string;
};
}
declare const _default: React.ComponentType<Pick<React.PropsWithChildren<ButtonProps>, "disabled" || "mini" & import("@material-ui/core/styles").StyledComponentProps<"root">>;
export default _default;Button.tsx:
import React, { Fragment } from 'react';
import clsx from 'clsx';
import { withStyles, createStyles } from '@material-ui/core/styles';
import { default as MuiButton, ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
export interface ButtonProps extends MuiButtonProps {
defaultMargin?: boolean,
classes: {
root: string
}
};
const styles = () => createStyles({
root: {
margin: '1.5em'
}
});
const Button: React.SFC<ButtonProps> = (props: ButtonProps) => {
return (
<Fragment>
<MuiButton
className={clsx({
[props.classes!.root]: props.classes!.root
})} {...props}>
</MuiButton>
</Fragment>
)
};
Button.defaultProps = {
variant: 'contained',
color: 'primary',
size: 'medium',
disabled: false
};
export default withStyles(styles)(Button);tsconfig.json:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"outDir": "types"
},
"declaration": true,
"include": ["src", "types"],
"types": "dist/core/src/index.d.ts",
"main": "dist/index.js",
"files": [
"dist/core/src/index.d.ts"
]
}，这里在主应用程序库中
App.tsx:
import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Button } from '@our-company/our-component-library-core'
import { Grid } from '@our-company/our-component-library-layout'
import { get } from 'lodash'
import './App.css';
import authenticationActions from '../reducers/authentication/actions'
import userActions from '../reducers/user/actions'
type Props = {
authDispatch: {
login: (args: any) => any,
logout: () => any
},
userDispatch: {
fetchUser: () => any
},
user: object
}
type State = {
count: number;
}
class App extends Component<Props, State> {
componentDidMount () {
this.props.authDispatch.login({email: 'email@email.com', password: '123456789'})
this.props.userDispatch.fetchUser()
this.props.authDispatch.logout()
}
render() {
const { user } = this.props
return (
<div className="App">
<header className="App-header">
<Grid container>
<Button variant="contained" color="primary">HELLO </Button>
<h1>{ get(user, ['user', 'attributes', 'email']) }</h1>
</Grid>
</header>
</div>
);
}
}
function mapStateToProps (state: any) {
const {
user
} = state
return {
user
}
}
function mapDispatchToProps (dispatch: any) {
return {
userDispatch: bindActionCreators(userActions, dispatch),
authDispatch: bindActionCreators(authenticationActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)我希望代码可以编译，但是它失败了，并显示了
ERROR in [at-loader] ./src/app/App.tsx:37:12
TS2604: JSX element type 'Button' does not have any construct or call signatures.回答 1
Stack Overflow用户
发布于 2019-04-11 03:53:29
您正在导出已创建的按钮组件：
const Button导出是默认导出：
export default withStyles(styles)(Button);无论withStyles调用的结果是什么，都不能用作JSX元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55619901
复制相关文章
相似问题