Как решить Предупреждение: React не распознает пропеллер X на элементе DOM

Question

Я использую вещь под названием реагировать-firebase-js , чтобы обрабатывать аутентификацию firebase, но мое понимание реакции и идеи поставщика-потребителя ограничено.

Я начал со встроенной очень большой 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>
    );
  }

Но это, лучший дизайнЯ думал, генерирует ошибки / предупреждения ...

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

);} else {if (this.state.confirmationResult) {return (// пользовательский интерфейс для получения входа с телефонного номера);} else {return (// пользовательский интерфейс для проверки отправленного смс-кода);}}}} );}

Ошибки / предупреждения выглядят следующим образом ...

[Ошибка] Предупреждение: React не распознает пропелу isSignedIn в элементе DOM.Если вы намеренно хотите, чтобы он отображался в DOM как пользовательский атрибут, вместо этого пишите его строчными буквами issignedin.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

[Ошибка] Предупреждение: React не распознает реквизит providerId в элементе DOM.Если вы намеренно хотите, чтобы он отображался в DOM в качестве пользовательского атрибута, вместо этого пишите его строчными буквами providerid.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

[Ошибка] Ошибка: невозможно загрузить внешние зависимости reCAPTCHA!(анонимная функция) (0.chunk.js: 1216) [Ошибка] Ошибка: предоставленная вами ошибка не содержит трассировки стека.

Я неправильно понимаю, как использовать поставщиков-потребителей, илиошибка в коде response-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