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

Question

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

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 должен быть Component, потому что он содержит некоторое состояние, но я также хочу, чтобы он вел себя как объект, который может получать ссылки от родителя и пересылать их потомкам (в основном 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}> 
    )
  }

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

Answer 1

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

1. Использование функционального компонента, заключенного в forwardRefфункция. Вы уже это сделали:

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

2. Изменение названия 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>
    )
  }
}

Конечно, вы также можете комбинировать их, что позволяет перейти к refprop из родительского, но потребляет "фиксированную" опору в компоненте дочернего класса, как показано здесь @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} />)