在项目中导入我的库时出错

Question

我正在使用create-react-library创建一个库。 我的图书馆使用 typescript、挂钩和 redux。

我认为我的问题出在 typescript 或钩子上。因为我尝试了不同的导出方式并且总是显示相同的错误。

./src/redux/RootReducer.tsx
    Attempted import error: 'react-tree-library' does not contain a default export (imported as 'HierarchyTreeReducerState').

我试过了：

Use export const
// Export a variable
export const App = () => { ... }

// Import App in another file
import { App } from '...'


Use export default
// Export default
const App = () => { ... }
export default App

// Import App in another file
import App from "...";
// And this option
import { App } from "...";

如你看到的：

const MainTree = ({
    data,
    portal,
    branch,
    ...
}: MainProps) => { ... }

const mapStateToProps = createStructuredSelector({
    branch: makeSelectBranchItem(),
    hierarchy: makeSelectHierarchyItem(),
});

const mapDispatchToProps = (dispatch: Dispatch) => {
    return {
        ...
        dispatch,
    };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect)(MainTree);

减速机：

 const HierarchyTreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case HierarchyTreeConstants.SET_SELECTED: {
            return Object.assign({}, state, {
                selected: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_DMA: {
            return Object.assign({}, state, {
                selectedDma: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_HIDDEN_BRANCHS: {
            return Object.assign({}, state, {
                hiddenBranchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default HierarchyTreeReducerState;


const TreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case TreeConstants.SET_NUMBRANCHS: {
            return Object.assign({}, state, {
                numBranchs: action.payload
            });
        }
        case TreeConstants.SET_BRANCH: {
            return Object.assign({}, state, {
                branchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default TreeReducerState;

图书馆的 index.ts：

export const TreeGoaiguaLibrary = ({
  portal,
  removeBranchWithChildren,
  data,
}: Props) => {
  return (
    <Main
      removeBranchWithChildren={removeBranchWithChildren}
      data={data}
      portal={portal}
    />
  );
};

export { TreeGoaiguaLibrary , TreeReducer, HierarchyTreeReducer };

当我对库进行纱线链接时，我在其他项目的 RootReducer 中导入以使用我的库，我这样做：

import { combineReducers } from "redux";
import TreeReducerState from "react-goaigua-tree-library";
import HierarchyTreeReducerState from "react-goaigua-tree-library";

const combinedReducers = combineReducers({
    branch: TreeReducerState,
    hierarchy: HierarchyTreeReducerState,
} as any);

export const RootReducer = (state: any, action: never): any => {
    return combinedReducers(state, action);
};

并显示错误：

./src/redux/RootReducer.tsx
Attempted import error: 'react-tree-library' does not contain a default export (imported as 'HierarchyTreeReducerState').

Answer 1

我已经解决了（我认为）

图书馆的 index.ts

import MainTree from "./components/main";
import HierarchyTreeReducerState from "./redux/reducers/HierarchyTreeReducer";
import TreeReducerState from "./redux/reducers/TreeReducer";

export { MainTree };
export default { TreeReducerState, HierarchyTreeReducerState };

减速机：

export const HierarchyTreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case HierarchyTreeConstants.SET_SELECTED: {
            return Object.assign({}, state, {
                selected: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_DMA: {
            return Object.assign({}, state, {
                selectedDma: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_HIDDEN_BRANCHS: {
            return Object.assign({}, state, {
                hiddenBranchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default HierarchyTreeReducerState;


export const TreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case TreeConstants.SET_NUMBRANCHS: {
            return Object.assign({}, state, {
                numBranchs: action.payload
            });
        }
        case TreeConstants.SET_BRANCH: {
            return Object.assign({}, state, {
                branchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default TreeReducerState;

现在告诉我这个错误：