Как структурировать компонент с помощью React Hooks с помощью объекта, который использует DOM напрямую? (например, OpenLayers)?) - PullRequest
Новая
       8

Как структурировать компонент с помощью React Hooks с помощью объекта, который использует DOM напрямую? (например, OpenLayers)?)

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

Я пытаюсь использовать React Hooks, где в компоненте, который я ранее использовал как основанный на классе. Компонент выглядит следующим образом: 

class A extends Component {
 constructor(props) {
  super(props)
  this.mapRef = createRef()
  this.map = new Map({ ... })
 }

 componentDidMount() {
  this.map.setTarget(this.mapRef.current)
 }

 // Also shouldComponentUpdate & componentWillUnmount

 render() {
  return (
   <div>
    <div ref={this.mapRef}></div>
    {this.props.children({map: this.map})}
   </div>
  )
 }
}

Мое понимание библиотеки открытых слоев состоит в том, что когда я создаю экземпляр объекта Map, мне нужно передать ему ссылку на элемент DOM, поскольку библиотека требуетпрямой контроль над элементом DOM. Я делаю это в функции componentDidMount через ref.

Пытаясь изменить этот код на React Hooks (из интереса), я пробовал это: 

function A (props) {
 var map
 const mapRef = useRef(null)

 useEffect(() => {
  map = new Map()
  map.setTarget(mapRef.current)
 })

  return (
   <div>
    <div ref={mapRef}></div>
    {props.children({map})}
   </div>
  )
}

Что только ошибки (потому что функция props.children получает null для объекта карты). Я попытался переместить инициализацию объекта карты из функции, которая, кажется, работает: 

const map = new Map({ ... })
function A (props) {
 const mapRef = useRef(null)

 useEffect(() => {
  map.setTarget(mapRef.current)
  // Then adjust the map however necessary depending on props
 })

  return (
   <div>
    <div ref={mapRef}></div>
    {props.children({map})}
   </div>
  )
}

Это несколько работает ... хотя кажется, что обратный вызов useEffect срабатывает гораздо чаще, чем необходимо. И я должен выяснить, как реализовать shouldComponentUpdate.

Это «правильный» подход к использованию React Hooks? Я не могу удержаться от ощущения, что в этом случае либо компонент класса имеет гораздо больше смысла, либо я неправильно использую крючки (возможно, последний).

В этом случае я на самом деле не используюКомпонент класса для состояния вообще, а скорее для возможности использовать методы жизненного цикла для обновления экземпляра карты из-за изменений DOM.

...