我正在开发一个 React、Redux Typescript 应用程序。 我遇到了一种奇怪的情况,在进行一些更改后,其中一个模块已停止导出其成员。
文件夹结构为:
src
|---- components
|---- containers
“组件”文件夹包含 .tsx 文件,而包装的 .ts 文件位于“容器”文件夹中。
模块 NodeList.tsx 列出如下:
import * as React from "react";
export const NodeList = (props) => (
<div id="NodeList">
<ul>
{props.items.map((item, i) => (
<li key={i} >
<span id={"Item_"+i}>{item}</span>
</li>
)
)}
</ul>
</div>
)
包装容器 NodeListContainer 是:
import { connect } from "react-redux";
import { Provider } from "react-redux";
import { Nodelist } from "../components/NodeList"
const nodesAsArrayOfType = (state, nodeType: string) => {
console.log("Going for nodes of type ", nodeType)
let a = state.data.model.nodes
let k = Object.keys(a);
let sub = k.filter((e) => {
return a[e].nodeType == nodeType
}).map((e) => a[e])
console.log("Got nodes ", sub)
return sub
}
const mapStateToProps = (state) => {
var list = nodesAsArrayOfType(state, state.UIstate.focusNodeType).map((e) => {return JSON.stringify(e)})
console.log("Returning ", list, list.length)
return {
items: list
}
}
const mapDispatchToProps = (dispatch) => {
return {
newTextValue: (e) => {dispatch({type: "ON_CHANGE", text: e.target.value})}
}
}
export const NodeListContainer = connect(
mapStateToProps,
mapDispatchToProps
)(NodeList)
上面 NodeList 的导入被标记为错误消息
ERROR in ./src/containers/NodeListContainer.ts
(4,10): error TS2305: Module '"MyProject/src/components/NodeList"' has no exported member 'Nodelist'.
任何人都可以提供有关这里可能发生的事情的任何见解吗?
如果你修正了拼写错误,你的代码应该可以工作。
而不是
import { Nodelist } from "../components/NodeList"
你应该写:
import { NodeList } from "../components/NodeList"
// ^ capital L
如果有人仍然遇到这个问题,我发现我只从文件中导出一项,所以进行更改
export default function App() {
...
};
到
export function App() {
...
}
似乎成功了!
另一件事要检查的是不明确/相似的文件名。
如果同一个包中有两个文件,其名称仅扩展名不同,也可能会发生这种情况。例如,如果您有
folder
foo.tsx
foo.ts
当您执行以下导入时:
import { Something } from "./foo";
它仅适用于其中一个文件中的项目。
这种情况的解决方案是重命名其中一个文件以消除歧义。然后导入就可以正常工作了。
您可以使用反应箭头功能代替导出功能 这对我有用
避免在类似的项目范围/文件夹中使用两个不同的文件扩展名,例如“js”和“txs”,否则会导致此类类型错误。