Могу ли я создать в React компонент, который также действует как объект Forwarded Ref?

Мне нужно использовать перенаправленные ссылки

const InfoBox = React.forwardRef((props, ref) => (
    <div ref={ref} >
      <Rings >
      </Rings>
      <Tagline  />
    </div>
));

Я также случайно уже написал такой код

class InfoBox extends React.Component {
   constructor(props) {
     super(props)
   }


   render () {
      return (
      <div  >
        <Rings />
        <Tagline  />
      </div>
      )
   }

в основном мой InfoBox должен быть Компонентом, потому что он содержит некоторое состояние, но я также хочу, чтобы он вел себя как объект, который может получать ссылки от родителя и пересылать их потомкам (в основном React.forwardRef)

После ознакомления с React.forwardRef я не могу понять, как заставить его работать с моими существующими компонентами React, функциональность которых уже привязана к состоянию.

мне нужно разделить два объекта и обернуть один в другой или есть способ добиться этого в одном объекте?

код, который обертывает Infobox, выглядит как

class AppContainer extends React.Component {
  constructor(props) {
    super()

    this.infobox_ref = React.createRef()
  }

  componentDidMount() {
     // this.infobox_ref.current.innerHTML should return the inner HTML of the infobox
  }

  render() {
    return (
      <InfoBox ref={this.infobox_ref}> 
    )
  }

правильно ли я использую перенаправленные ссылки?


reactjs react-forwardref
person Jason FB    schedule 20.11.2019    source источник
comment
Что касается, мой InfoBox должен быть Компонентом, потому что он содержит какое-то состояние, .... Какую версию React вы используете? Если React ›= 16.8, то вы можете использовать хуки для хранения состояний и эмуляции методов жизненного цикла, не превращая InfoBox в компонент класса и сохраняя forwardRef.   -  person dance2die    schedule 20.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

В React свойство ref по умолчанию не пересылается. Чтобы получить ссылку в дочернем компоненте, у вас есть 2 варианта:

  1. Использование функционального компонента, заключенного в функцию forwardRef. Вы уже это сделали:
const InfoBox = React.forwardRef((props, ref) => (
    <div ref={ref} >
      <Rings >
      </Rings>
      <Tagline  />
    </div>
));
  1. Изменение имени ref опоры.
// Parent Component
class AppContainer extends React.Component {
  constructor(props) {
    super()
    this.infobox_ref = React.createRef()
  }

  componentDidMount() {
     // this.infobox_ref.current.innerHTML should return the inner HTML of the infobox
  }

  render() {
    return (
      <InfoBox infoboxRef={this.infobox_ref}> 
    )
  }
}

// Child Component
class InfoBox extends React.Component {
  render () {
    return (
      <div ref={this.props.infoboxRef}>
        <Rings />
        <Tagline  />
      </div>
    )
  }
}

Конечно, вы также можете комбинировать их, позволяя вам по-прежнему переходить к опоре ref от родителя, но используя «фиксированную» опору в компоненте дочернего класса, как показано здесь @ tubu13:

class InfoBox extend React.Component{
  render() {
    return (
      <div ref={this.props.infoboxRef}>
        <Rings />
        <Tagline  />
      </div>
    )
  }
}

export default React.forwardRef((props, ref) => <InfoBox {...props} infoboxRef={ref} />)
person meesvandongen    schedule 20.11.2019
comment
мои объекты по-прежнему отображаются как {current: null} при проверке из componentDidMount в AppContainer - person Jason FB; 20.11.2019
comment
Я создал эту песочницу кода, которая показывает ссылку с другим именем: codeandbox.io/s/staging- glade-rt8jq @JasonFB. Как видите, консоль регистрирует правильное значение. - person meesvandongen; 20.11.2019
comment
спасибо, это полезно. Я думаю, что моя проблема может заключаться в том, что я создал массив ссылок и пытаюсь передать его по индексу массива ref={this.marbles_refs_array[i]} - person Jason FB; 20.11.2019
comment
также должен работать массив ссылок: см. codeandbox.io/s/busy-chatterjee-lkkky @JasonFB - person meesvandongen; 21.11.2019
comment
@JasonFB Если вы можете поместить свой конкретный случай в песочницу кода, я могу взглянуть. - person meesvandongen; 21.11.2019