标签: react-16

我正在使用React的最新版本(16.6)和react-router(4.3.1)并尝试使用代码分割React.Suspense.

虽然我的路由工作正常并且代码确实分裂成了几个动态加载的bundle,但我收到的警告是不返回一个函数,而是一个对象Route.我的代码:

import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';

import Loading from 'common/Loading';

const Prime = lazy(() => import('modules/Prime'));
const Demo = lazy(() => import('modules/Demo'));

const App = () => (
  <Suspense fallback={<Loading>Loading...</Loading>}>
    <Switch>
      <Route path="/" component={Prime} exact />
      <Route path="/demo" component={Demo} />
    </Switch>
  </Suspense>
);

export default withRouter(App);

控制台警告如下: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`. …

我有以下组件呈现一系列组件.但是,我下载了React 16.2并尝试使用片段而不是div,但是我收到以下错误:

Error in ./src/containers/answers.js
Syntax error: Unexpected token (24:5)

  22 |     
  23 | return (
> 24 |     <>
     |      ^
  25 |       {AnswersCard}
  26 |     </>
  27 |    )

当片段应该能够替换React 16.2中的div时,为什么会出现此错误？

  question ? 
    AnswersCard = ( question.answers.sort(function(a,b) { return (a.count < b.count) ? 1 : ((b.count > a.count) ? -1 : 0)} 
    ).map(answer =>  
    <Answer key={answer.id} answer={answer} questionId={question.id} />
    )) : AnswersCard = ( <p>Loading...</p> )

return (
    <>
      {AnswersCard}
    </>
   )
  }
}

Warning: Received `false` for a non-boolean attribute `comingsoon`.

If you want to write it to the DOM, pass a string instead: 
comingsoon="false" or comingsoon={value.toString()}.

如何在React的自定义属性中传递布尔值？

我正在使用样式组件并通过组件传递属性.这是我如何通过attr的图片.

将布尔自定义attr作为"comesoon"传递

样式组件css道具

我用的阵营16.3.1和next.js.
我将getDerivedStateFromProps放在扩展PureComponent的类中.

这是代码:

Header.js

import { PureComponent } from 'react'
...

export default class Header extends PureComponent {
  constructor (props) {
    super(props)

    this.colorAnimationProps = {
      animationDuration: '0.4s',
      animationFillMode: 'forwards'
    }

    this.colorAnimationStyle = {
      toColor: {
        animationName: 'toColor',
        ...this.colorAnimationProps
      },
      toTransparent: {
        animationName: 'toTransparent',
        ...this.colorAnimationProps
      }
    }

    this.state = {
      colorAnimation: {},
      headerModal: null
    }
  }

  componentDidMount () {
    if (this.props.isColor) {
      this.setState({colorAnimation: this.colorAnimationStyle.toColor})
    }
  }

  static getDerivedStateFromProps (nextProps, prevState) {
    console.log('should go …

我是新手，我正在尝试将一些数据作为参数发送到history.push.

基本上，我在单击按钮时调用一个方法，并在该方法内调用一个 api。如果我收到成功响应，我将重定向到其他页面，并且还需要传递一些数据。

下面是我的代码：

class Login extends Component  {

  constructor(props) {
    super(props);
    this.state = {
      enteredName: null,
      enteredPwd: null,
      rescode: null,
      userName: null,
      formatDesc: null,
      userFormat : null,
      success: false,
      responseJson : null,
    };
  }

  state = {
    enteredName: null,
    enteredPwd: null,
    rescode: null,
    userName: null,
    formatDesc: null,
    userFormat : null,
    success: false,
    responseJson : null,
  }
    render=() =>{

        return (
          <Router>
          <div id= "login-page">
            <div className="back-image" style={{height:"100vh"}}>
              <div className="container">
                <form className="form-login" action="index.html">
                  <h2 className="form-login-heading">sign in now</h2>
                  <div …

所以16.4"修复了"getDerivedStateFromProps中的一个错误,现在它在道具更改和状态更改时被解雇了.显然这是有意的,来自这篇文章:https://github.com/facebook/react/issues/12898.但是对我来说,在州内保存以前的道具是一个重大的过度杀伤,所以我问是否有人在处理这样的案件时做了一个程序:

class Componentche extends React.Component {
  state = {
    valuesForInput: {
      input1: ''
    }
  }
  static getDerivedStateFromProps(props, state) {
    if (props.someInitialValuesForInput.input1 !== state.valuesForInput.input1) {
      return {
       valuesForInput: {
         ...state,
         input1: props.someInitialValuesForInput.input1
       }
      }
    }
   return state;

   render () {
      <Input value='valuesForInput.input1' onChange='(e) => setState({valuesForInput: {...this.state, input1: e.target.value }})'
   }
}

所以在上面这种情况下,我永远不会改变输入,因为getDerivedStateFromProps将在接收的新道具和setState触发器上执行,我的条件永远不会是假的.

那么处理这种情况的正确方法是什么？我是否需要在州内保留旧道具并将其用于条件？

我刚从React看到这篇文章,但他们没有提供可行的替代方案.

谢谢你的帮助!

升级后对16.x的反应后出现以下错误

Uncaught TypeError: Cannot read property 'injection' of undefined
    at injectTapEventPlugin (injectTapEventPlugin.js:23)
    at eval (index.js:53)
    at Object.<anonymous> (bundle.js:1363)
    at __webpack_require__ (bundle.js:556)
    at fn (bundle.js:87)
    at eval (multi_main:3)
    at Object.<anonymous> (bundle.js:589)
    at __webpack_require__ (bundle.js:556)
    at bundle.js:579
    at bundle.js:582

请帮忙!!!

反应版本 - > "^16.4.2" react-tap-event-plugin - >"^3.0.3"

我目前正在使用带有Suspense和Lazy的React 16来拆分我的代码库。虽然我想预加载组件。

在下面的示例中，我有两条路线。挂载Demo后有Prime没有预加载的方法？我尝试componentDidMount在Prime页面的中创建另一个动态导入，但React.lazy似乎并没有获得与下面的动态导入相同的文件。

import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import GlobalStyle from 'styles';

import Loading from 'common/Loading';
const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));
const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));

const App = () => (
  <main>
    <GlobalStyle />
    <Suspense fallback={<Loading>Loading...</Loading>}>
      <Switch>
        <Route path="/" component={Prime} exact />
        <Route path="/demo" component={Demo} />
      </Switch>
    </Suspense>
  </main>
); …

我在 CRA 反应应用程序中使用哨兵浏览器。我创建了一个错误边界组件，并使用它来捕获错误。

到目前为止一切顺利，我发现了错误并成功将其记录到哨兵。

当我想传递用户信息或设置标签时，问题就出现了；这些信息不会被传递，除非我将它设置在我的索引文件中（但这样我无权访问商店，因此无法访问当前用户信息）。

那么，我应该在哪里调用 Sentry.configureScope() 来设置这些信息？

编辑： 我意识到 sentry.configureScope() 实际上在我的记录器函数中工作正常。问题是我试图用 ErrorBoundary 包装 App，除非在启动时错误已经存在，否则它不会被引导。

现在，如果我想保持基本粒度，如何避免将每个组件都包装在 ErrorBoundary 中？

我的代码如下：

指数：

Sentry.init({
  dsn: "https://xxxxx.yyyyyyyyy",
  environment: process.env.NODE_ENV,
  release: '0.1.0'
})

// HERE IT WOULD WORK --------- BUT I HAVE NO STORE ACCESS
/* Sentry.configureScope(scope => {
     scope.setExtra('battery', 0.7);
     scope.setTag('user_access', 'admin');
     scope.setUser({ id: '555' });
}); */

ReactDOM.render(
<Provider store={store}>
    <LocalizeProvider store={store}>
        <PersistGate loading={<Spinner />} persistor={persistor}>
            <ErrorBoundary>
                <App />
            </ErrorBoundary>
        </PersistGate>
    </LocalizeProvider>
</Provider>,
document.getElementById('root'));

错误边界.JS

import * as React from 'react'
import * …

我正在尝试映射片段的子级，而该片段又是组件的子级。例如：

const Frag = () => (
  <React.Fragment key="test-key">
    <div>test1</div>
    <div>test2</div>
  </React.Fragment>
);

const Outer = ({ children }) => (
  <div>
    {
      React.Children.map(children, (child) => (
        <a>
          {child}
        </a>
      ))
    }
  </div>
);

// Usage
<Outer>
  <Frag />
</Outer>

a即使片段内部有多个 div，这也会产生单个标签。文档（https://reactjs.org/docs/react-api.html#reactchildrenmap）似乎表明这应该与键控片段一起使用，我认为我正在正确创建一个键控片段（https://reactjs.org /docs/fragments.html#keyed-fragments）。任何帮助，将不胜感激！