如何解决 Warning: React does not recognize the X prop on a DOM element

Question

我正在使用一个叫做 react-firebase-js 的东西来处理 firebase 身份验证，但我对反应和 provider-consumer 想法的理解是有限的。

我从在顶层构建了一个非常大的 JSX 东西开始，它在没有警告的情况下工作。但是当我尝试将它分解成组件时，我收到了标题中显示的警告和其他一些警告。

这会在没有警告的情况下运行...

// in App.js component

  render() {
    return (
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <FirebaseAuthConsumer>
                {({ isSignedIn, user, providerId }) => {
                    if (isSignedIn) {
                        return (
                           // ui for signed in user
                        );  
                    } else {
                        if (this.state.confirmationResult) {
                            return (
                                // ui to get a phone number sign in
                            );
                        } else {                  
                            return (
                                // ui to verify sms code that was sent
                            );
                        }
                    }
                }}
            </FirebaseAuthConsumer>
        </header>
    );
  }

但是，我认为更好的设计会产生 errors/warnings...

// in App.js component
render() {
    return (
      <MuiThemeProvider>
      <FirebaseAuthProvider {...config} firebase={firebase}>
        <div className="App">
          <IfFirebaseAuthed>
            <p>You're authed buddy</p>
            <RaisedButton label="Sign Out" onClick={this.signOutClick} />
          </IfFirebaseAuthed>
          <IfFirebaseUnAuthed>
              <Authenticater />  // <-- this is the new component
        </IfFirebaseUnAuthed>
        </div>
      </FirebaseAuthProvider>
      </MuiThemeProvider>
    );
  }

// in my brand new Authenticator component...

  render() {
    return (
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <FirebaseAuthConsumer>
                {({ isSignedIn, user, providerId }) => {
                    if (isSignedIn) {
                        return (
                        <div>
                            <pre style={{ height: 300, overflow: "auto" }}>
                            {JSON.stringify({ isSignedIn, user, providerId }, null, 2)}
                            </pre>
                        </div>
                        );  
                    } else {
                        if (this.state.confirmationResult) {
                            return (
                                // ui to get a phone number sign in
                            );
                        } else {                  
                            return (
                                // ui to verify an sms code that was sent
                            );
                        }
                    }
                }}
            </FirebaseAuthConsumer>
        </header>
    );
  }

errors/warnings 看起来像这样...

[Error] Warning: React does not recognize the isSignedIn prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase issignedin instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[Error] Warning: React does not recognize the providerId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase providerid instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[Error] Error: Unable to load external reCAPTCHA dependencies! (anonymous function) (0.chunk.js:1216) [Error] Error: The error you provided does not contain a stack trace.

我是不是误解了如何使用 provider-consumers，或者 react-firebase 代码有错误，还是我做错了什么？谢谢。

Answer 1

据推测，这行一定是罪魁祸首：

<FirebaseAuthProvider {...config} firebase={firebase}>

您的 config 对象当前包含字段 isSignedIn 和 providerId，您必须将它们发送到子组件，并最终发送到 DOM 元素。在发送之前尝试从对象中删除这些字段：

const { providerId, isSignedIn, ...authProviderConfig } = config

这样，您的对象 authProviderConfig 将不会包含 providerId 或 isSignedIn 属性。

更好的是，您可以显式重建配置对象以避免任何进一步的混淆：

const authProviderConfig = { /* The fields from config FirebaseAuthProvider actually needs */ }

您还应该检查 FirebaseAuthProvider 组件以了解它如何使用这些道具，并避免将它们分散到 DOM 个元素。

相关文档：https://reactjs.org/warnings/unknown-prop.html

Answer 2

就我而言，我在 react-firebase 中使用 IfFirebaseAuthed 组件时遇到此错误。

您必须确保 return 此组件内的函数。

在我的例子中，我改变了这个：

<IfFirebaseAuthed>
  ... My authenticated code here ...
</IfFirebaseAuthed>

为此：

<IfFirebaseAuthed>
 {() => (
    ... My authenticated code here ...
 )}
</IfFirebaseAuthed>

然后这个问题就消失了。

Answer 3

出现此警告是因为您在组件上传递了一个无效的 prop。

比如这个

<Component someUnknowprop='random-text' />

将触发警告。为了摆脱警告，您应该找出该警告的来源。堆栈跟踪应该会给你一个提示。

如何解决 Warning: React does not recognize the X prop on a DOM element

How to solve Warning: React does not recognize the X prop on a DOM element

javascript

producer-consumer

firebase

reactjs

firebase-authentication