如何解决警告：阵营不承认一个DOM元素的X道具

Question

我使用了一个名为react-firebase-js处理火力权威性的事情，但我的理解，反应和提供者的消费理念是有限的。

我开始与一个内置一个非常大的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>
    );
  }

错误/警告这个样子......

[错误]警告：阵营不能识别DOM元素上isSignedIn道具。如果您有意它出现在DOM为自定义属性，拼写为小写issignedin代替。如果你不小心从父组件通过了它，从DOM元素删除。

[错误]警告：阵营不能识别DOM元素上providerId道具。如果您有意它出现在DOM为自定义属性，拼写为小写providerid代替。如果你不小心从父组件通过了它，从DOM元素删除。

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

我误解了如何使用提供者的消费者，或者是有错误的反应，火力代码，还是我做一些其他东西错了吗？谢谢。

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