Question

尝试学习React / Redux / React路由器生态系统，并在我尝试集成React路由器时遇到问题。

我尝试将React Router和History的版本降低到2.X.X，但这没有用。

获取错误“元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。“

如何确定哪个对象未定义？

PS：我知道在使用Webpack和导入方面没有理想的设置，但是在学习这些其他组件之前，我试图了解这些组件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Redux Route Test</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-redux/4.0.8/ReactRouterRedux.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/history/4.5.1/history.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
    </head>
    <body>
        <div class="content" id="content">

        </div>
        <script type="text/babel">
            const initialState = {
                items: []
            }

            function reducer(state = initialState, action) {
                switch(action.type) {
                    case 'GET_ALL':
                        return Object.assign({}, state, {items: action.items});
                    case 'ADD_NEW':
                        return Object.assign({}, state, {items: [...state.items, action.item]});
                    default:
                        return state;
                }
            }

            const history = History.createBrowserHistory();
            const middleware = ReactRouterRedux.routerMiddleware(history);

            const store = Redux.createStore(
                Redux.combineReducers({
                    ...reducer,
                    router: ReactRouterRedux.routerReducer
                }),
                Redux.applyMiddleware(middleware)
            );

            class ContainerA extends React.Component {
                load() {
                    var json = [
                        {fieldA: "1", fieldB: "2"},
                        {fieldA: "3", fieldB: "4"}
                    ]

                    store.dispatch({type: 'GET_ALL', items: json});
                }

                render() {
                    return (
                        <div>
                            <button onClick={this.load.bind(this)}>Load Data</button>
                            <label>{this.props.items.length}</label>
                        </div>
                    )
                }
            }

            class ContainerB extends React.Component {
                render() {
                    return (
                        <div>Loaded Next Component</div>
                    )
                }
            }

            const mapStateToProps = function(store) {
                return {
                    items: store.items
                }
            }

            var RootApp = ReactRedux.connect(mapStateToProps)(ContainerA);

            ReactDOM.render(
                <ReactRedux.Provider store={store}>
                    <ReactRouterRedux.ConnectedRouter>
                        <ReactRouter.Route path="/" component={RootApp} />
                    </ReactRouterRedux.ConnectedRouter>
                </ReactRedux.Provider>,
                document.getElementById("content")
            );
        </script>
    </body>
</html>

React / Redux / Router集成错误：“React.createElement：type is invalid”

0 个答案: