如何解决警告：React 无法识别 DOM 元素上的 X 属性答案

【问题标题】：How to solve Warning: React does not recognize the X prop on a DOM element如何解决警告：React 无法识别 DOM 元素上的 X 属性
【发布时间】：2019-06-25 09:12:16
【问题描述】：

我正在使用一个名为 react-firebase-js 的东西来处理 firebase 身份验证，但我对 react 和提供者-消费者理念的理解是有限的。

我首先在顶层构建了一个非常大的 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>
    );
  }

但我认为，这种更好的设计会产生错误/警告...

// 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>
    );
  }

错误/警告如下所示...

[错误] 警告：React 无法识别 a 上的 isSignedIn 属性 DOM 元素。如果您有意希望它在 DOM 中显示为自定义属性，将其拼写为小写issignedin。如果你不小心从父组件传递了它，将其从 DOM 中删除元素。

[错误] 警告：React 无法识别 a 上的 providerId 属性 DOM 元素。如果您有意希望它在 DOM 中显示为自定义属性，将其拼写为小写providerid。如果你不小心从父组件传递了它，将其从 DOM 中删除元素。

[错误] 错误：无法加载外部 reCAPTCHA 依赖项！ (匿名函数) (0.chunk.js:1216) [错误] 错误：你的错误提供的不包含堆栈跟踪。

我是否误解了如何使用提供者-消费者，或者 react-firebase 代码中是否有错误，或者我做错了什么？谢谢。

【问题讨论】：

删除{JSON.stringify({ isSignedIn, user, providerId }, null, 2)}并检查错误是否仍然出现
@evgenifotia - 谢谢。试了一下，同样的错误。
FirebaseAuthProvider是如何实现的？
请添加 FirebaseAuthProvider 代码
您收到错误是因为您将 isSignedIn 和 providerId 放在 DOM 元素之一上。像这样：<h3 isSignedIn={...}>stuff</h3>。这在反应中无效。在所有使用 isSignedIn 和 providerId 的情况下搜索您的代码，并确保它们不是直接在 HTML 元素上。它需要是一个反应组件。你可以在这里看到它codesandbox.io/s/o4kn2vqj4q

标签： javascript reactjs firebase firebase-authentication producer-consumer

【解决方案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 元素。

【讨论】：

【解决方案2】：

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

您必须确保在此组件内返回一个函数。

就我而言，我改变了这个：

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

到这里：

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

这个问题就消失了。

【讨论】：

【解决方案3】：

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

比如这个

<Component someUnknowprop='random-text' />

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

【讨论】：