useReducer() 当前页面需要多个 state 一起更新时
usecontext
React.forwardRef
-
关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件
// 无法生效当前ref指向组件
const A=React.forwardRef((props,ref)=> {
<B {...props} ref={ref}/>
})
// 可以生效指向DOM元素div
const A=React.forwardRef((props,ref)=>(
<div ref={ref}>
<B {...props}/>
</div>
))
- useRef: 用于获取
元素的原生DOM或者获取自定义组件
所暴露出来的ref方法(父组件可以通过ref获取子组件,并调用相对应子组件中的方法) - React.forwardRef:
将ref父类的ref
作为参数传入函数式组件中,本身props只带有children这个参数,这样可以让子类转发父类的ref
,当父类把ref挂在到子组件上时,子组件外部通过forwrardRef包裹
,可以直接将父组件创建的ref挂在到子组件的某个dom
元素上
使用 forwardRef 和 useImperativeHandle 的方案
- forwardRef会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中
- blog.csdn.net/qq_44586361…
function InputWithLabel(props) {
const { myRef } = props;
const _innerRef = useRef(null);
const getValue = () => {return 'value'};
useImperativeHandle(myRef, () => ({
getValue,
focus() {
const node = _innerRef.current;
node.focus();
}
}));
return (
<div> <input ref={_innerRef} value={value}/> </div>
);
}
const RefInput = React.forwardRef((props, ref) => (
<InputWithLabel {...props} myRef={ref} />
));
function App() {
const myRef = useRef(null);
const handleFocus = () => {
const node = myRef.current;
console.log(node);
};
return (
<div className="App">
<RefInput ref={myRef} />
<button onClick={handleFocus}>focus</button>
</div>
);
}
结语
前端react QQ群:
788023830
----React/Redux - 地下老英雄
前端交流 QQ群:
249620372
----FRONT-END-JS前端
(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习