react ref获取dom对象
step = React.createRef(); // init
<div ref={this.step}></div> // bind
componentDidMount() {
l(this.step.current.offsetHeight); // 获取数据
}
为 类 添加ref
这种方法是获取组件的实例,而不是组件的dom
class Hello extends Component {
log = () => {
l(1);
};
render() {
return (
<div>
<button>click me</button>
</div>
);
}
}
class Test extends Component {
btn = React.createRef();
componentDidMount() {
this.btn.current.log(); // 1
}
render() {
return (
<div>
<Hello ref={this.btn} />
</div>
);
}
}
函数组件使用 ref
function CustomTextInput(props) {
// 这里必须声明 textInput,这样 ref 回调才可以引用它
let textInput = null;
function handleClick() {
textInput.focus();
}
return (
<div>
<input
type="text"
ref={(input) => { textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
传递 refs
class Hello extends Component {
render() {
return (
<div>
<button ref={this.props.btnRef}>click me</button>
</div>
);
}
}
class Test extends Component {
btn = React.createRef();
componentDidMount() {
fromEvent(this.btn.current, "click").subscribe(v => l(v.type)); // click
}
render() {
return (
<div>
<Hello btnRef={this.btn} />
</div>
);
}
}
高阶组件中传递 ref
function withTest() {
return function(Target) {
class WithTest extends Component {
render() {
const { forwardedRef, ...rest } = this.props;
return (
<div>
233
<Target ref={forwardedRef} {...rest} />
</div>
);
}
}
function forwardRef(props, ref) {
return <WithTest {...props} forwardedRef={ref} />;
}
return React.forwardRef(forwardRef);
};
}
@withTest()
class Hello extends Component {
render() {
return (
<div>
<div>hello</div>
</div>
);
}
}
class Test extends Component {
btn = React.createRef();
componentDidMount() {
l(this.btn.current); // 获取到 Hello 的实例
}
render() {
return <Hello ref={this.btn} />;
}
}