标签: react-16

编辑:下面的答案

我在youtube上都遵循了这两个教程(目前没有太多),但它们都不适用于我,它在index.js中向Provider发送了这个错误:

教程1:视频和代码

教程2:视频和代码

元素类型无效:期望一个字符串(用于内置组件)或一个类/函数(用于复合组件)但得到:object.

我的代码Context.js文件:

import React from 'react'
export const Context = React.createContext();

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo';

import { Context } from './Context'

const client = new ApolloClient({
    link: new HttpLink({ uri: process.env.API_URL }),
    cache: …

在控制台中，我看到以下警告：

index.js：2178警告：主体具有一个名为shouldComponentUpdate（）的方法。扩展React.PureComponent时不应该使用shouldComponentUpdate。如果使用shouldComponentUpdate，请扩展React.Component。

Body 组件正在使用

...
import { observer, inject } from 'mobx-react';
...
@inject('store')
@observer
class Body extends React.PureComponent<BodyProps> {
...

但在shouldComponentUpdate任何地方都没有这种方法。

这是从哪里来的mobx-react？我可以PureComponent在用@observable或装饰的组件中使用@inject吗？

尝试从React 15.4升级到React 16.4.1(也将react-dom升级到16.4.1)后,我从路由器收到此错误消息:

TypeError: _nextProps.children is not a function
    at ReactDOMServerRenderer.render (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2491:55)
    at ReactDOMServerRenderer.read (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
    at renderToString (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
    at render (/var/www/web/server/routes/others.jsx:141:24)
    at process._tickCallback (internal/process/next_tick.js:68:7)

代码:

const render = () => {
  const body = renderToString(
    <MuiThemeProvider muiTheme={muiTheme}>
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <IntlProvider>
            <RouterContext {...renderProps} />
          </IntlProvider>
        </Provider>
      </ThemeProvider>
    </MuiThemeProvider>
);

render 在此处定义,但之后在相同的路由文件中返回:

Promise.all(prefetchData(renderProps, store))
  .then(render)
  .catch(prefetchError => next(prefetchError));

我按照建议的说明从React 15.x升级到React 16.x.

自从我发现有关材料与React 16的兼容性的相关问题:

https://github.com/mui-org/material-ui/issues/8434

https://github.com/mui-org/material-ui/issues/7795

我想知道这个错误信息是否可能是由材料-ui 0.2x和React 16.x之间的不兼容引起的,或者换句话说,我想知道是否有必要升级到material-ui 1.x以便能够使用React 16.x.

由于 webpack 4 和 react-loadable，我刚刚开始在服务器端使用代码拆分和动态导入来渲染 react 16 应用程序。

我的问题可能听起来很愚蠢，但有些事情我不太明白。

在服务器端，我在等待 webpack 加载所有模块，然后再将 html 吐出到客户端。

在客户端，在渲染加载的组件之前，我渲染了一种加载组件。

所以基本上服务器呈现加载的组件：

<div>loaded component</div>

客户端对加载组件进行水合：

<div>loading...</div>

显然，问题是 React 在 hydrate() 之后抱怨，因为服务器和客户端之间存在未命中匹配。

在几秒钟内，客户端首先呈现

<div>loading...</div>

而服务器已呈现并发送到客户端，加载组件的 html。

有人可以启发我吗？它是如何工作的？加载组件时如何防止首次渲染时出现不匹配？

我遇到了一个奇怪的行为。看看这个小提琴。当使用React 16错误处理机制，即Error Boundary时，我注意到参数error为空。经过进一步调查，我意识到只有在抛出 Error 对象时才会出现这种情况，如下所示：

throw new Error('The world is very strange')

但是，当以这种方式抛出错误时：

throw 'The world is very strange'

该错误将在 中出现componentDidCatch。

请有人赐教。我希望继续使用，new Error因为建议使用它，并且它应该可以访问文件和抛出的行号。

我们来看一下代码。

class Boundary extends React.Component {
    constructor() {
      super();
      this.state = {}
    }

    componentDidCatch(error, info) {
       this.setState({
        error,
        info,
      })
    }

  render() {
    if (this.state.error) {
       return (
       <div>
         {JSON.stringify(this.state)}
       </div>)
    }
    return this.props.children;
   }
}

class Component extends React.Component {
    render() {
  // Why and what should i …

我刚刚将我的create-react-app更新到版本2.1.1,它增加了对typescript的支持(检查出来).

通过命令npx create-react-app my-app --typescript,可以默认创建一个带有typescript的react应用程序,但是添加了lazy

import React, { Component, lazy} from 'react';

导致此错误

Type error: Module '".../node_modules/@types/react/index"' 
has no exported member 'lazy'.  TS2305

可能我在这里遗漏了一些东西

谢谢

我正在将我的 React 应用程序更新为react-16，但我的所有测试都停止了。我已经升级enzyme，jest-enzyme，react-dom，安装enzyme-adapter，创造了setupTest.ts酶的文件，更新了我的jestconfig.js文件，但我仍然得到错误。如果有人知道可能会出什么问题。

执行时没有依赖警告（有关反应|测试） npm ls

这是我的jestconfig

{
  "moduleDirectories": [
    "node_modules",
    "src"
  ],
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "moduleNameMapper": {
    "\\.(css|scss)$": "identity-obj-proxy"
  },
  "transform": {
    ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js",
  "snapshotSerializers": [
    "enzyme-to-json"
  ],
  "setupTestFrameworkScriptFile":"<rootDir>/config/setupTests.ts",
  "coveragePathIgnorePatterns": ["node_modules", "__tests__"],
  "testRegex": "__tests__/.*\\.test\\.(ts|tsx|js)$",
  "collectCoverageFrom": ["src/**/*.{ts,tsx}"],

...rest of code

src/setupTests.ts

import 'raf/polyfill'; // <= this removes the requestAnimationFrame warning error
import * as Enzyme from 'enzyme';
import * …