DOM ссылки на функциональные компоненты? - PullRequest
Новая
       42

DOM ссылки на функциональные компоненты?

1 голос
/ 03 апреля 2020

Я не уверен, как реализовать ссылки для функциональных компонентов. Я знаю, что вам нужно использовать forwardRef, но я не понимаю, как на них указывать в других местах кода. Например, я отрисовываю <img ref="someStr">, а затем ссылаюсь на этот элемент в componentDidMount через this.refs.someStr.

Вот мой оригинальный код: 

  componentDidUpdate(prevProps, prevState) {
    if (this.props.activeMarker !== prevProps.activeMarker) {
      let img_ref = this.refs.image
      if (this.props.showingInfoWindow) {
        img_ref.style.border = "2px solid black"
      }
      else {
        img_ref.style.border = null
      }
    }
  }

  return ( <img src={this.props.image} alt="unit" ref="cg_image" style={{width:200, height:100}} />)

И я хочу заменить img на компонентactstrap: 

const fancyCard = React.forwardRef((props,ref) => (
   <CardImg ref={ref} top width="100%" src={this.props.image}/>
))

Каким аналогичным образом можно ссылаться на нестроковое значение refs в componentDidMount?

...