React hooks: Как записать переменные в функциональных компонентах, которые в компонентах класса были инициализированы в конструкторе - PullRequest
Новая
       11

React hooks: Как записать переменные в функциональных компонентах, которые в компонентах класса были инициализированы в конструкторе

0 голосов
/ 31 мая 2019

Я использую uppy с React, и они обычно инициализируют uppy как глобальную переменную. В React они позволяют сделать это вместо: 

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.uppy = Uppy()
      .use(Transloadit, {})
  }

  componentWillUnmount () {
    this.uppy.close()
  }

  render () {
    return <StatusBar uppy={this.uppy} />
  }
}

Как мне написать это в функциональном компоненте с хуками? Наивный подход был бы следующим (не ожидал, что это сработает после прочтения этой проблемы ): 

const MyComponent = () => {
  const uppy = Uppy()
    .use(Transloadit, {})

  useEffect(() => {
    return () => uppy.close()
  })

  return <StatusBar uppy={uppy} />
}

PS: Это должно быть сделано внутри функционального компонента, потому что я использую некоторые реквизиты в методе uppy.use.

Ответы [ 2 ]

2 голосов
/ 31 мая 2019

Переменные в функциональных компонентах могут быть инициализированы с помощью useRef hook (подробнее здесь ).Кроме того, поскольку вы хотите запускать функцию очистки только при размонтировании, а не при каждом повторном рендеринге, вы должны передать пустой [] в качестве второго аргумента useEffect

const MyComponent = () => {
  const uppy = useRef(Uppy()
    .use(Transloadit, {}))

  useEffect(() => {
    return () => uppy.current.close()
  }, [])

  return <StatusBar uppy={uppy.current} />
}
0 голосов
/ 31 мая 2019

Вы можете достичь, как это. 

> const MyComponent = (props) => {   let uppy;
> 
>   useEffect(() => {
>     uppy = Uppy()
>     .use(Transloadit, {});
>     return () => uppy.close()   }, [])
> 
>   return <StatusBar uppy={uppy} /> }
...