javascript - 如何解决警告:React 无法识别 DOM 元素上的 X 属性
问题描述
我正在使用一个名为react-firebase-js的东西来处理 firebase 身份验证,但我对 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>
);
}
错误/警告看起来像这样......
[错误] 警告:React 无法识别
isSignedIn
DOM 元素上的道具。如果您有意希望它作为自定义属性出现在 DOM 中,请将其拼写为小写字母issignedin
。如果您不小心从父组件传递了它,请将其从 DOM 元素中移除。[错误] 警告:React 无法识别
providerId
DOM 元素上的道具。如果您有意希望它作为自定义属性出现在 DOM 中,请将其拼写为小写字母providerid
。如果您不小心从父组件传递了它,请将其从 DOM 元素中移除。[错误] 错误:无法加载外部 reCAPTCHA 依赖项!(匿名函数)(0.chunk.js:1216)[错误]错误:您提供的错误不包含堆栈跟踪。
我是否误解了如何使用 provider-consumers,或者 react-firebase 代码中有错误,还是我做错了其他事情?谢谢。
解决方案
据推测,这条线一定是罪魁祸首:
<FirebaseAuthProvider {...config} firebase={firebase}>
您的config
对象当前包含字段isSignedIn
和providerId
,您必须将它们发送到子组件,并最终发送到 DOM 元素。在发送它们之前尝试从对象中删除这些字段:
const { providerId, isSignedIn, ...authProviderConfig } = config
这样,您的对象authProviderConfig
将不包含providerId
orisSignedIn
属性。
更好的是,您可以显式重建配置对象以避免任何进一步的混淆:
const authProviderConfig = { /* The fields from config FirebaseAuthProvider actually needs */ }
您还应该检查您的FirebaseAuthProvider
组件以了解它是如何使用这些道具的,并避免将它们传播到 DOM 元素中。
推荐阅读
- python - YOLOv4 注释将尺寸保存在 [0,1] 浮点数中
- python - 为什么 param moveY 没有出现?Pygame更新方法
- encryption - 用于蒙特卡洛测试的 AES 验证标准伪代码缺少什么?
- python - 发送重复命令时 Kivy GUI 冻结
- java - java list.remove 适用于第一个元素,但不适用于其他元素
- python - item_list[-1] 的更多 Pythonic 方式!= item_list[-2]?
- html - 文本下方的 svg 图像(文本装饰)
- python - 为什么 if not operation == '/' or '*' or '+' or '-': 给我一个语法错误,
- kubernetes - POD 中的 configMap 引用是否需要 ServiceAccount?
- c++ - 为什么我在 stm32cube ide 上的串行终端不显示任何内容?