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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用一种称为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无法识别isSignedInDOM元素上的prop。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写issignedin。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

[错误]警告：React无法识别providerIdDOM元素上的prop。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写providerid。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

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

我是在误解如何使用提供者-消费者，还是React-firebase代码有错误，还是我做错了其他事情？谢谢。

回答：

大概这条线一定是罪魁祸首：

<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

以上是 如何解决警告：React无法识别DOM元素上的X属性 的全部内容， 来源链接： utcz.com/qa/404987.html

回到顶部