React中子组件触发效果的最佳模式

Question

假设我有父功能组件和子功能组件。父对象希望触发一些效果，例如在子对象中聚焦或调整大小。例如，我有一个包含提交按钮的通用表单组件(子组件(，而包含所有非通用表单UI的父组件希望让子组件关注提交按钮。

问题是父对象不能直接调用函数来聚焦，所以我必须在子对象上设置一些道具，当它改变时，告诉子对象运行效果。但是，父母必须知道动作何时执行，这样才能重新设置道具，为下次可能需要触发效果做好准备。这就是我正在做的：

export const Form: FunctionComponent<FormProps> = props => {
const [focusOkay, setFocusOkay] = useState(false);
function handleKey(e: React.KeyboardEvent) {
if (e.key === 'Enter') {
setFocusOkay(true);
}
}
return (
<ChildForm
focussedOkay={() => setFocusOkay(false)}
focusOkay={focusOkay}
>
<input onChange={handleKey} />
</ChildForm>
);
};
export const ChildForm: FunctionComponent<ChildProps> = props => {
const okayBtn = useRef<HTMLButtonElement>();
useEffect(() => {
if (props.focusOkay) {
okayBtn.current.focus();
if (props.focussedOkay) {
props.focussedOkay();
}
}
}, [props.focusOkay]);
return (
<button ref={okayBtn} >OK </button>
);
}

这是有效的，但我觉得它很丑陋，因为它需要使用两个道具，一个让家长说"聚焦按钮"；另一个让孩子回答"；好吧，我集中注意力了"；。有更好的方法吗？

Answer 1

我通常在将子元素包装在forwardRef-hoc中后，为子元素中的元素设置一个ref，然后自己从父调用焦点