Доступ к ссылке на компонент передается как реквизит?

Question

Я передаю стилизованный компонент

const Text = styled.span`
   font-size: 10px
`

render(){
   <Test comp = {<Text innerRef={(ref)=>{this.ref=ref}}>Hello</Text>}/>
}

Внутри Test компонент, который я хочу получить доступ к ref из Text но у меня проблемы с этим. Это возможно? Я хочу получить доступ к значению размера шрифта внутри Test, Заранее спасибо за помощь.

Answer 1

Поскольку вы передаете компонент в качестве реквизита другому компоненту, React его вообще не отображает, и поэтому у вас нет ref,

Если ваша цель - завернуть Text в Test, правильный способ сделать это - передать его в детстве. Таким образом, React будет визуализировать компонент и создаст его ref,

const Text = styled.span`
   font-size: 10px
`

render(){
   <Test>
     <Text innerRef={ref => this.ref = ref}>Hello</Text>
   </Test>
}

Если вы хотите получить доступ к ref в TestВы можете сделать это через this.props.children.ref

РЕДАКТИРОВАТЬ

поскольку styled-components есть своя опора для получения refнужно использовать React.createRef() и получить доступ к ref через реквизит:

const Text = styled.span`
   font-size: 10px
`

class Test extends React.PureComponent {
  componentDidMount() {
    // This is how you access the ref ;)
    console.log(this.props.children.props.innerRef.current);
  }

  render() {
    return (
      <div className='test'>{this.props.children}</div>
    );
  }
}

class App extends React.PureComponent {

  render() {
    return (
      <Test>
        <Text innerRef={React.createRef()}/>
      </Test>
    );
  }
}