CLJS/Reagent：React 无法识别 DOM 元素上的道具答案

【问题标题】：CLJS/Reagent: React does not recognize the prop on a DOM elementCLJS/Reagent：React 无法识别 DOM 元素上的道具
【发布时间】：2021-02-11 19:22:07
【问题描述】：

我看到 Javascript/React 中有很多类似的问题，但我在 CLojureScript/Reagent 中遇到了这个问题，我不知道如何在不弄乱我所有应用程序状态名称的情况下解决它。

所以我在浏览器控制台中收到了这些警告：

react_devtools_backend.js:2430 Warning: React does not recognize the `showWarning` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showwarning` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

这些似乎来自应用状态中的项目名称：

(defonce app-state (reagent/atom {:show-warning "none"}))

我找到的唯一解决方案是将项目从 :show-warning 重命名为 :showwarning 但这会导致一堆难以阅读的项目。

我无法真正控制 Reagent 如何将 :show-warning 之类的键重命名为“showWarning”，但作为 React 工作原理的基础，这似乎有一种更简洁的方式来处理这个问题。

谢谢！

【问题讨论】：

如果 React 甚至知道你的应用程序状态的键，那么就有问题了。你能展示你的程序中将 app-state 暴露给 React DOM 元素的部分吗？
@BipedPhill 我不清楚你在问什么。我没有任何直接的 React 代码，因为这是带有 Reagent 的 CLJS。 Reagent 包装了所有的 React 位，所以它有点不可见。但我同意，有些不对劲。这些属性都不应该像这样传递给 DOM，但我不确定它是如何做到的。
@jwh20 我敢打赌，在您的代码中某处，您的状态处于 props 位置。像[div @app-state] 这样的东西。可能您正在尝试渲染它并且应该完成[div {} @app-state]。这有点棘手，因为如果你有一些可以评估为字符串的东西，那很好，但地图试剂会尝试像道具一样对待。
@WaltonHoops 我将查看类似结构的代码。谢谢！
@WaltonHoops 请将其发布为答案！我发现一个看起来很无辜的函数调用正在对 app-state atom 中的键执行（交换！），但当然，它返回了新的 app-state，然后将其放置在 [:div] 元素中。问题解决了！

标签： clojurescript reagent

【解决方案1】：

React 真的不应该看到你的状态或者关心它里面有什么。我的猜测是你在道具位置的某个地方渲染你的状态。很可能在您的代码中某处您有[:div @app-state]。可能您正在尝试渲染状态并且应该完成[:div {} @app-state]。

这可能是 Reagent 的一个小问题，因为 [:p @im-a-string] 会渲染字符串，但 [:p @im-a-map] 会将地图视为道具。

【讨论】：