0

我需要使用转发的 refs

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 组件一起工作，这些组件已经具有附加到状态的功能。

我是否需要将两个对象分开，并将一个包裹在另一个对象中，或者有没有办法可以在同一个对象中实现这一点？

包装信息框的代码看起来像

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}> 
    )
  }

我是否正确使用转发的参考？

4

1 回答 1

0

在 React 中，refprops 默认是不转发的。为了在子组件中获得引用，您有 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} />)
于 2019-11-20T19:04:29.533 回答