Question

我正在传递样式化的组件

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

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

在Test组件内部，我想访问ref的{{1}}，但是这样做很麻烦。这可能吗？我想访问Text内部的font-size值。在此先感谢您提供的所有帮助。

Answer 1

由于要将组件作为道具传递给另一个组件，因此React根本不会渲染它，因此您没有ref。

如果您的目标是将Text包裹在Test中，则正确的方法是将其作为 child 传递。这样，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>
    );
  }
}

访问传递为道具的组件的Ref？

1 个答案: