如何解决警告:React无法识别DOM元素上的X属性 [英] How to solve Warning: React does not recognize the X prop on a DOM element
问题描述
我正在使用一种叫做 react-firebase-js 的东西来处理Firebase身份验证,但我的理解是反应和提供者-消费者的想法是有限的.
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.
我从顶层开始构建了一个非常大的JSX东西,并且在没有警告的情况下可以正常工作.但是,当我尝试将其分解为各个部分时,我得到了标题和其他一些警告.
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...
[错误]警告:React无法识别 DOM元素.如果您有意让它以DOM的形式出现在DOM中 自定义属性,则将其拼写为小写
issignedin
.如果你 意外地从父组件传递了它,将其从DOM中删除 元素.
[Error] Warning: React does not recognize the
isSignedIn
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseissignedin
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
[错误]警告:React无法识别
DOM元素.如果您有意让它以DOM的形式出现在DOM中
自定义属性,则将其拼写为小写providerid
.如果你
意外地从父组件传递了它,将其从DOM中删除
元素.
[Error] Warning: React does not recognize the providerId
prop on a
DOM element. If you intentionally want it to appear in the DOM as a
custom attribute, spell it as lowercase providerid
instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
[错误]错误:无法加载外部reCAPTCHA依赖项! (匿名函数)(0.chunk.js:1216)[错误]错误:您遇到的错误 提供的不包含堆栈跟踪.
[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.
我是否误解了如何使用提供者-消费者,或者react-firebase代码是否存在错误,或者我做错了其他事情吗?谢谢.
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}>
您的config
对象当前包含字段isSignedIn
和providerId
,并且您必须将这些字段发送给子组件,最后发送给DOM元素.尝试将这些字段从对象中删除,然后再向下发送:
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
这样,您的对象authProviderConfig
将不包含providerId
或isSignedIn
属性.
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 */ }
您还应该检查FirebaseAuthProvider
组件,以了解其如何使用这些道具,并避免将其传播到DOM元素中.
You should also check your FirebaseAuthProvider
component to see how it's using those props, and avoid spreading them down to DOM elements.
相关文档: https://reactjs.org/warnings/unknown-prop.html
这篇关于如何解决警告:React无法识别DOM元素上的X属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!