在項目中導入我的庫時出錯

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;

現在告訴我這個錯誤：