【问题标题】:SolidJS - how to get the current component instanceSolidJS - 如何获取当前组件实例
【发布时间】:2022-08-20 02:33:12
【问题描述】:

有没有办法访问实例/获取它当前在 SolidJS 中渲染/活动的组件的引用,以及它当前的道具、信号、内部状态、效果等?

我正在寻找类似 React 的 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner(但在生产中也可以使用)或 Svelte 的运行时内部 get_current_component() 之类的东西。为了提供一些上下文,我需要它的原因是因为我正在构建一个库,该库提供了一个应该能够访问当前使用该函数的组件的 props 的函数。

我尝试过使用 SolidJS getOwner(),但我不确定我是否理解它。我找不到对组件当前道具或信号或效果的任何引用。

有什么方法可以在 Solid 中实现它,还是有任何“hack”来实现类似的东西?

提前谢谢

    标签: javascript typescript solid-js


    【解决方案1】:

    由于 Solid 的工作方式和处理“组件”的方式,这些东西是有限的、不可用的或仅在开发中可用。 在生产中,Solid 抛弃了它不需要工作的东西。

    问题在于,与 Svelte 或 React 不同,“组件实例”本身并不存在于实体中。这只是信号和反应的图表。 什么是组件?只是一个返回一些 DOM 元素的函数,通过将它们添加到图形中来创建一些信号和计算,然后......它会被垃圾收集,仅此而已。生产中的组件与任何其他功能(挂钩)没有什么不同。

    当然,该图在某种程度上仍然是可分析的。 (生产少一点) 您可以看到他们当前观察到的所有计算(createEffect、createMemo 等)和信号。仅此而已。也许还有上下文。 我们理解的 props —— 一个由父级传递给子级的响应式对象——只是一个带有一些 getter 传递给函数的对象——它在响应式图中并不作为一个单独的实体存在。 您仍然可以访问其中的信号——但只有在它们被用于某些效果时——创意图的某些节点具有对其的引用。

    有点像这样: https://playground.solidjs.com/?hash=597826062&version=1.4.1

    所以,如果你正在创建一个打算在生产中使用的库——我宁愿建议你使用参数/道具明确地提供你想要的数据,而不是通过遍历内部结构。

    但是,如果您希望在开发过程中对反应图进行一些可视化,您可以查看此调试器的源代码:https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger

    【讨论】:

    • 好的,我明白了,谢谢!在 StackOverflow 上提出问题之前,我正在阅读有关调试器和图表的一些内容,我认为我理解道具并没有真正在任何地方“注册”,但我希望我弄错了,我想确定一下。
    • 你的图书馆会做什么?我相信 props 可以很容易地传递给函数并以这种方式进行跟踪,但这需要 1 个组件 == 1 个函数调用。
    • 它适用于传递给组件的事件回调。是的,我会选择将道具直接传递给函数,这是我正在考虑的一个选项。如果您需要将它们作为一个整体传递给函数,则无法直接在参数中解构道具(例如,您不能这样做function Counter = ({ count }) => ....),这很烦人。
    猜你喜欢
    • 2017-08-21
    • 1970-01-01
    • 1970-01-01
    • 2011-12-22
    • 2023-03-26
    • 1970-01-01
    • 2017-01-23
    • 1970-01-01
    • 2013-08-06
    相关资源
    最近更新 更多