reactjs 如何使用外部依赖触发createEffect?

xzabzqsa  于 2022-12-22  发布在  React
关注(0)|答案(3)|浏览(142)

有没有办法使用外部依赖项触发Solid的createEffect,就像React的useEffect依赖项数组一样?
我想在location.pathname更改时调用setShowMenu

const location = useLocation()

createEffect(() => {
    console.log(location.pathname) // << external dependency
    setShowMenu(false)
})

在有更好的选择之前,我会用这个作为变通方案。

const location = useLocation()

createEffect(() => location.pathname && setShowMenu(false))
ie3xauqp

ie3xauqp1#

也许您正在寻找on助手?

createEffect(
  on(
    () => location.pathname,
    () => setShowMenu(false)
  )
);

https://www.solidjs.com/docs/latest/api#on

bvuwiixz

bvuwiixz2#

术语“外部依赖”并不是一个准确的术语来描述你正在尝试做什么,不幸的是,它是相当误导。如果你检查文档,外部通常意味着其他React式库或存储,如RxJS和Solid提供from函数的互操作性:

一米一米一

一个帮助器,使它更容易与外部生产者(如RxJS observables或Svelte Stores)互操作。
现在,回答你的问题,与React组件不同,Solid组件可以访问其外部作用域。因此,信号不需要是组件或作用域的本地信号,就可以触发其效果的重新运行。
Solid中的组件是用来组织代码的,它们在初始运行后会消失。你可以从任何模块导入任何信号,并使用createComputedcreateEffect等订阅其更改。因此,遵循JavaScript的作用域规则就足以满足你的情况。

tpxzln5u

tpxzln5u3#

我认为您需要创建一个Signal。https://www.solidjs.com/tutorial/introduction_effects #:~:text=当%20任何%20%20%20效果发生更改时,%20效果%20无法%20%20%20%20创建。& text =现在%20单击%20%20按钮%20将%20写入%20%20控制台。
“JSX中的每个表达式都是其自身的效果,每当其依赖信号更改时,都会重新执行”
我会尝试这样的方式:

import { render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js';

function ShowMenuHandler() {
  const [showMenu, setShowMenu] = createSignal(false);
  createEffect(() => {
    console.log("The menu is shown", showMenu());
  });

  return <button onClick={() => setShowMenu(showMenu())}>Click Me</button>;
}

render(() => <ShowMenuHandler />, document.getElementById('app'));

相关问题