【发布时间】：2022-11-21 15:40:11
【问题描述】：
我面试了一个职位并被问到这个问题。显然，我没有答案因此寻求你们的帮助。
我被问到的是：
创建一个模仿子组件表单结构的通用加载器屏幕，这样我们就可以显示要加载的内容的动画骨架，而不是显示微调器。
我的想法是手动克隆结构并为其制作动画。这很好用，但这只适用于一种形式。所以问题是，我们怎样才能做到这一点？
我认为可能可行的想法：
- 我们也许可以模仿 props 来进行空白渲染并将其用作加载器。然后我们只需要为表单设置动画，我们可以使用 css 来完成。这种方法的问题是，
- 我们不知道有哪些元素可以设置动画
- 如果我们使用 redux 并使用
useSelector，它将中断- 我们可以查看 HOC。这样我们就知道将要渲染哪个组件。但是，同样的问题也适用于此。
- 也许我们可以研究继承或反应门户或字符串操作以寻找一些 hacky 的方式，但这是半生不熟的想法。
这是展示动画的示例JSFiddle。
我卡住的地方是，如何获取组件的标记？大多数真实组件将使用道具，如果不可用，可能会损坏。
【问题讨论】：
-
任何指示/建议也会有所帮助。
-
我无法想象这样的组件：子组件的 jsx 结构对于父组件是未知的，因此除非您传递一些结构描述，否则骨架不会模仿任何东西。如果您找到此问题的答案，请发布！
-
@BenjaminCaure 即使我整天都在为此挠头。我有一个基于 css 的 hack。让我创建一个沙箱并发布它，但就反应而言，我怀疑是否有任何可靠的方法。我仍然会环顾四周，看看我能找到什么
-
我不认为你需要父加载器。我将为呈现
{children}（表单字段本身）的所有表单字段创建代理包装器，如果给定字段的值未定义，则只需在其上应用加载动画类。但是模仿没有值的形式无论如何都是不准确的，因为它可以增长（例如标签多选）。 -
Here 是我的意思的简化示例
标签： javascript reactjs