时间戳

首页 > 解决方案 > 使用依赖于 ref 不为空的反应钩子

javascript - 使用依赖于 ref 不为空的反应钩子

问题描述

我正在尝试将一个observable传入 react-jss 以更改样式，因为 observable 会发出新值。开箱即用，如下所示：

function randomColor() { ... } // generates a random color

const App = () => {
  const source = timer(0, 1000).pipe(map(randomColor));
  const useStyles = createUseStyles({bg: {background: source}});
  const classes = useStyles();
  return (<div className={classes.bg}>test</div>);
}

当我想使用来自本机鼠标事件的可观察对象时，问题就出现了，在我的情况下，我正在复制拖放功能。在这种情况下，我的组件看起来像这样

function createDraggable(el) { ... } // => Observable<{x: number, y: number}>
const App = () => {
  const div = useRef(null);
  const useStyles = createUseStyles({
    div: { 
      left: createDraggable(div).map(coords => coords.x ), 
      top: createDraggable(div).map(coords => coords.y) 
    }
  })
  useStyles(); // error null is not an HTMLElement
  return(...) 
}

为了确保 ref 不为空，我需要在createDraggable内部调用，useEffect但我不能使用useStyles. 我只提出了一种潜在的解决方案，即放弃原生 dom 事件并结合使用 a来复制没有 refs 的行为Subject。synthetic events我不知道这是否是最好的方法。对我来说，这似乎是很多重新发明轮子的事情。

标签： javascriptreactjsrxjsreact-hooks

解决方案

推荐阅读