0

我正在使用react-cookie包，当我尝试在最高级别的组件中设置它时，它会抛出这些错误：

React.createElement: type is invalid - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：符号。

Invariant Violation：根路由必须渲染单个元素

[1] Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: symbol.
[1]     in RouterContext
[1]     in AsyncConnect
[1]     in Connect(AsyncConnect)
[1]     in IntlProvider
[1]     in Connect(IntlProvider)
[1]     in Provider
[1]     in Context.Provider
[1]     in CookiesProvider
[1]     in StyleSheetManager
[1] C:\Users\me\Projects\my-application\node_modules\react-transform-catch-errors\lib\index.js:47
[1]             throw err;
[1]             ^
[1] Invariant Violation: The root route must render a single element
[1]     at invariant (C:\Users\me\Projects\my-application\node_modules\invariant\invariant.js:40:15)
[1]     at Object.render (C:\Users\me\Projects\my-application\node_modules\react-router\lib\RouterContext.js:125:155)
[1]     at processChild (C:\Users\me\Projects\htmmy-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)
[1]     at resolve (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
[1]     at ReactDOMServerRenderer.read (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
[1]     at Object.renderToString (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
[1]     at Html.render (C:/Users/me/Projects/my-application/src/helpers/Html.js:29:42)
[1]     at Html.tryRender (C:\Users\me\Projects\my-application\node_modules\react-transform-catch-errors\lib\index.js:34:31)
[1]     at processChild (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)

// 路线

export default () => (
  <Route path="/:locale/" component={App}>
    ...
    <Route path="login" component={Login} />
  </Route>
);

// LoginPage（这样放是不行的）

@withCookies
@connect(state => ({ auth: state.auth }), { login })
export default class LoginPage extends PureComponent {
  static propTypes = {
    cookies: PropTypes.instanceOf(Cookies).isRequired,
    auth: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
  }
  ...

但是，如果我将它移到另一个组件中并导入它，它将起作用。

// 登录页面

export default class LoginPage extends PureComponent {
  render() {
    return (
      <div>
        <Login />
      </div>
    );
  }
}

// 登录

@withCookies
@connect(state => ({ auth: state.auth }), { login })
export default class Login extends PureComponent {
  static propTypes = {
    cookies: PropTypes.instanceOf(Cookies).isRequired,
    auth: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
  }
  ...

我尝试以不同的方式导出，但仍然遇到相同的错误：

export class LoginPage extends PureComponent {
  ...
}

const App = connect(state => ({ auth: state.auth }), { login })(LoginPage);

export default withCookies(App);

有没有办法可以在最高级别的组件中进行设置？

附加信息：

// server.js

    const component = (
      <CookiesProvider cookies={req.universalCookies}>
        <Provider store={store} key="provider">
          <IntlProvider>
            <ReduxAsyncConnect {...renderProps} />
          </IntlProvider>
        </Provider>
      </CookiesProvider>
    );

    const html = ReactDOM.renderToString(
      <Html assets={webpackIsomorphicTools.assets()} component={component} store={store} />
    );
    res.status(200);
    res.send(`<!doctype html>\n${html}`);
4

1 回答 1

0

在react-cookies服务器端之后，示例中的代码如下所示：

// src/server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { CookiesProvider } from 'react-cookie';

import Html from './components/Html';
import App from './components/App';

export default function middleware(req, res) {
  const markup = ReactDOMServer.renderToString(
    <CookiesProvider cookies={req.universalCookies}>
      <App />
    </CookiesProvider>
  );

  const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />);

  res.send('<!DOCTYPE html>' + html);
}

不知道有没有关系，但是你不使用ReactDOMServer但是ReactDOM，有什么原因吗？

于 2019-04-30T09:13:23.627 回答