now it is conceived to write a general component that can reuse multiple business scenarios, as follows:
< Fu onScrollIn= {(this) = > {this.setState ({}} >
<Zi> < / Fu >
when the Zi component is scrolled into view, the parent component triggers the onScrollIn function (the parameter is a child component instance, and you can operate state to control the internal state of the child component).
now the idea is that since the Zi component can be any component and has no fixed requirements, it requires hoc to cover a shell to obtain the new react16 features used by ref to obtain the scrollTop, as follows:
const withRef = (WrappedComponent) = > {
class Hoc extends Component {
render() {
const {forwardedRef, ...rest} = this.props
return <WrappedComponent ref={forwardedRef} {...rest}/>
}
}
return React.forwardRef((props, ref) => {
return <Hoc {...props} forwardedRef={ref}/>
})}
@ withRef
class Child extends Component {
constructor(props) {
super()
this.state = {
test: 124
}
}
render() {
return (
<input defaultValue="123"/>
)
}}
class InView extends Component {
constructor() {
super()
this.myRef = React.createRef()
}
componentDidMount() {
console.log(this.myRef.current)
}
render() {
return (
<Child ref={this.myRef}/>
)
}}
InView is my general component, and Child is a sub-component (as shown in the code, Child can be any component so ref, is not written in input in order to achieve high reuse), but now the log prints out that current is Child, that is, sub-component instance, is there any way to get the ref of input wrapped in Child and then get the height of the content to complete my requirements? Thank you