如何解决警告:React 无法识别 DOM 元素上的 X 属性 [英] How to solve Warning: React does not recognize the X prop on a DOM element
问题描述
我正在使用一种叫做 react-firebase-js 的东西来处理 firebase 身份验证，但我的理解反应和提供者消费者的想法是有限的.
我开始在顶层构建一个非常大的 JSX 东西，并且它可以在没有警告的情况下工作.但是当我尝试将其分解为多个组件时，我收到了标题和其他一些警告中显示的警告.
这在没有警告的情况下有效...
//在 App.js 组件中使成为() {返回 (<header className="App-header"><img src={logo} className="App-logo" alt="logo"/><FirebaseAuthConsumer>{({ isSignedIn, user, providerId }) =>{如果(isSignedIn){返回 (//登录用户的 ui);} 别的 {如果(this.state.confirmationResult){返回 (//ui 获取电话号码登录);} 别的 {返回 (//ui 验证发送的短信代码);}}}}</FirebaseAuthConsumer></标题>);}但是，我认为更好的设计会产生错误/警告...
//在 App.js 组件中使成为() {返回 (<MuiThemeProvider><FirebaseAuthProvider {...config} firebase={firebase}><div className="应用程序"><IfFirebaseAuthed><p>你是经过认证的好友</p><RaisedButton label="Sign Out" onClick={this.signOutClick}/></IfFirebaseAuthed><IfFirebaseUnAuthed><验证器/>//<-- 这是新组件</IfFirebaseUnAuthed></FirebaseAuthProvider></MuiThemeProvider>);}//在我全新的 Authenticator 组件中...使成为() {返回 (<header className="App-header"><img src={logo} className="App-logo" alt="logo"/><FirebaseAuthConsumer>{({ isSignedIn, user, providerId }) =>{如果(isSignedIn){返回 (<div><pre style={{ height: 300, overflow: "auto" }}>{JSON.stringify({ isSignedIn, user, providerId }, null, 2)}
);} 别的 {如果(this.state.confirmationResult){返回 (//ui 获取电话号码登录);} 别的 {返回 (//ui 验证已发送的短信代码);}}}}</FirebaseAuthConsumer></标题>);}
错误/警告看起来像这样...
<块引用>[Error] 警告:React 无法识别 isSignedIn 属性DOM 元素.如果您有意希望它在 DOM 中显示为自定义属性，将其拼写为小写 issignedin.如果你不小心从父组件传递了它，将它从 DOM 中删除元素.
[错误] 警告:React 无法识别 providerId 属性DOM 元素.如果您有意希望它在 DOM 中显示为自定义属性，将其拼写为小写 providerid.如果你不小心从父组件传递了它，将它从 DOM 中删除元素.
[错误] 错误:无法加载外部 reCAPTCHA 依赖项！(匿名函数) (0.chunk.js:1216) [Error] Error: 你的错误提供的不包含堆栈跟踪.
我是否误解了如何使用 provider-consumers，或者 react-firebase 代码中是否存在错误，或者我做错了什么?谢谢.
想必，这一行一定是罪魁祸首:
您的 config 对象当前包含字段 isSignedIn 和 providerId，您必须将它们发送到子组件，并最终发送到 DOM元素.在发送之前尝试从对象中删除这些字段:
const { providerId, isSignedIn, ...authProviderConfig } = config这样，您的对象 authProviderConfig 将不会包含 providerId 或 isSignedIn 属性.
更好的是，您可以显式地重建配置对象以避免任何进一步的混淆:
const authProviderConfig = {/* 来自配置 FirebaseAuthProvider 的字段实际上需要 */}您还应该检查您的 FirebaseAuthProvider 组件以了解它如何使用这些道具，并避免将它们传播到 DOM 元素.
相关文档:https://reactjs.org/warnings/unknown-prop.html
I'm using a thing called react-firebase-js to handle firebase auth, but my understanding of react and of the provider-consumer idea is limited.
I started with a built a very big JSX thing all at the top level, and that works without warnings. But when I try to break it into components, I got the warning shown in the title and a few others.
This works without warning...
// 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>
);
}
But this, better design, I thought, generates errors/warnings...
// 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>
);
}
The errors/warnings look like this...
[Error] Warning: React does not recognize the
isSignedInprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseissignedininstead. If you accidentally passed it from a parent component, remove it from the DOM element.[Error] Warning: React does not recognize the
providerIdprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseprovideridinstead. If you accidentally passed it from a parent component, remove it from the DOM element.[Error] Error: Unable to load external reCAPTCHA dependencies! (anonymous function) (0.chunk.js:1216) [Error] Error: The error you provided does not contain a stack trace.
Am I misunderstanding how to use provider-consumers, or is there an error in the react-firebase code, or am I doing some other thing wrong? Thanks.
Presumably, this line must be the culprit:
<FirebaseAuthProvider {...config} firebase={firebase}>
Your config object currently holds fields isSignedIn and providerId, and you must be sending those down to children components, and ultimately to a DOM element. Try removing those fields from the object before you send them down:
const { providerId, isSignedIn, ...authProviderConfig } = config
That way, your object authProviderConfig will not hold the providerId or isSignedIn attributes.
Even better, you can rebuild the configuration object explicitly to avoid any further confusion:
const authProviderConfig = { /* The fields from config FirebaseAuthProvider actually needs */ }
You should also check your FirebaseAuthProvider component to see how it's using those props, and avoid spreading them down to DOM elements.
Related documentation: https://reactjs.org/warnings/unknown-prop.html
这篇关于如何解决警告:React 无法识别 DOM 元素上的 X 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
