경고 해결 방법: 리액트가 DOM 요소의 X 프로펠을 인식하지 않음

경고 해결 방법: 리액트가 DOM 요소의 X 프로펠을 인식하지 않음

파이어베이스 인증을 처리하기 위해 react-firebase-js라고 하는 것을 사용하고 있습니다만, 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>
    );
  }

오류/경고는 다음과 같습니다.

: 가 [Error]를하지 않습니다.isSignedInDOM ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」 어트리뷰트로 에 는, 「DOM」으로 합니다.issignedin합니다.부모 컴포넌트에서 실수로 전달된 경우 DOM 요소에서 제거합니다.

: 가 [Error]를하지 않습니다.providerIdDOM ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」 어트리뷰트로 에 는, 「DOM」으로 합니다.providerid합니다.부모 컴포넌트에서 실수로 전달된 경우 DOM 요소에서 제거합니다.

[오류] 오류:외부 reCAPTCHA 종속성을 로드할 수 없습니다! (익명 함수) (0.chunk.js:1216) [오류] 오류:지정한 오류에 스택트레이스가 포함되어 있지 않습니다.

프로바이더와 컨슈머의 사용법을 잘못 알고 있는 건가요, 아니면 리액트파이어베이스 코드에 오류가 있는 건가요, 아니면 다른 잘못된 작업을 하고 있는 건가요?감사해요.

아마도 다음 행이 원인일 것입니다.

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

의 ★★★★★★★★★★★★★★★★★.config는 현재 필드를 .isSignedIn ★★★★★★★★★★★★★★★★★」providerId그리고 그것들을 하위 컴포넌트로, 최종적으로 DOM 요소로 전송해야 합니다.이러한 필드를 전송하기 전에 개체에서 삭제해 보십시오.

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

하면,의 목적물 「」이 됩니다.authProviderConfig 하지 못하다providerId ★★★★★★★★★★★★★★★★★」isSignedIn★★★★★★ 。

더 이상 혼란을 피하기 위해 Configuration개체를 명시적으로 재구축할 수 있습니다.

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

이 때 여러분도 확인해보셔야 합니다.FirebaseAuthProvider이러한 소품을 어떻게 사용하는지 확인하고 DOM 요소로 확산되지 않도록 합니다.

관련 자료: https://reactjs.org/warnings/unknown-prop.html

이 주의는 구성 요소에서 유효하지 않은 프로펠러를 전달했기 때문에 표시됩니다.

예를 들어, 이것은

<Component someUnknowprop='random-text' />

경고를 트리거합니다.경고를 없애기 위해서는 그 경고가 어디에서 오는 것인지 알아내야 한다.스택 트레이스를 통해 힌트를 얻을 수 있습니다.

소품 이름에 $를 추가해서 해결했습니다.

.tsx 파일:

<Wrapper $offset={isOffset}>

.style.tsx 파일에서는 다음 작업을 수행합니다.

height: ${({ $offset }) => ($offset ? 'calc(100% + 20px)' : '100%')};

내 경우 IfFirebase를 사용할 때 이 오류가 발생했습니다.React-FireBase에서 컴포넌트를 자동 장착했습니다.

이 컴포넌트 내부에서 함수를 반환해야 합니다.

이것을 변경했습니다.

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

이를 위해:

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

그리고 이 이슈는 사라졌습니다.

커스텀 소품 체크

제 경우 재사용 가능한 숨김 컴포넌트를 만들었습니다.(처음에는 텍스트가 마스크된 버튼이 마운트됩니다.)******이 버튼을 클릭하면 CopyToClipboard 컴포넌트인 키(API 키)가 표시됩니다.

const [hide, setHide] = useState(true);

한다면hide이true버튼을 렌더링하고 있습니다(모든 소품을 펼칩니다).

<Button onClick={() => setHide(false)} {...props}>
     ******
</Button>

이 버튼을 클릭하면hideFalse이며 CopyToClipboard 컴포넌트를 렌더링하고 있습니다.

<CopyToClipboard
   {...props}
>
  {value}
</CopyToClipboard>

문제

1. 위의 시나리오에서, 나는 퍼지고 있다.{...props}버튼과 CopyToClipboard 컴포넌트 양쪽으로 이동합니다.
2. 그러나 CopyToClipboard의 일부 소품은 Button의 소품과 호환되지 않습니다.

고치다

1. 따라서 컴포넌트 상단에서 컴포넌트 고유의 소품(여기서는 CopyToClipboard)을 구축합니다.
2. 이제 나머지 소품을 양쪽 컴포넌트에 안전하게 배치하고 새로운 소품을 개별적으로 전달합니다(CopyToClipboard 컴포넌트에).

const {onCopy, ...restProps} = props

<Button onClick={() => setHide(false)} {...restProps}>
     ******
</Button>

<CopyToClipboard
   onCopy={onCopy}
   {...props}
>
  {value}
</CopyToClipboard>

언급URL : https://stackoverflow.com/questions/54468535/how-to-solve-warning-react-does-not-recognize-the-x-prop-on-a-dom-element