используя ответный хук, который зависит от того, что ссылка не является нулевой - PullRequest
Новая
       9

используя ответный хук, который зависит от того, что ссылка не является нулевой

0 голосов
/ 24 октября 2019

Я пытаюсь передать observable в response-jss, чтобы изменить стили, так как наблюдаемое излучает новые значения. Это работает «из коробки» следующим образом: 

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(...) 
}

Чтобы убедиться, что ссылка не является нулевой, мне нужно вызвать createDraggable внутри useEffect, но тогда я не могу использовать useStyles. Я только предложил одно потенциальное решение, которое состоит в том, чтобы отбросить нативные события dom и использовать Subject в сочетании с synthetic events для репликации поведения без ссылок. Я не знаю, если это лучший способ, хотя. Похоже, мне пришлось много изобретать колесо.

...