React：将焦点添加到作为包装器的组件的第一个子级

如果我有一个像这样的组件

const Comp = ({children}) => {

    //some code
    return (
        <div> 
            {children}
        </div>
    )

}

然后这样称呼它

<Comp>
    <input onChange={...} />
    <input onChange={...} />
</Comp>

当组件渲染时，如何从组件内部将焦点更改为该组件的第一个输入字段Comp成分。

理想情况下，我想要一个 useEffect 函数或类似的东西

useEffect(() => {
   thisComponent.firstChild.focus()
})

你需要两件事，useRef and useEffect, useRef用于获取目标元素引用，以及useEffect用于在组件渲染时处理聚焦。

children在组件中 props 是一个数组，所以你可以操作它，你可以使用index得到哪个child要设置 ref 的元素，然后调用focus()通过参考useEffect:

function App(props) {
  const firstChildRef = useRef(null);

  useEffect(() => {
    if(firstChildRef.current) {
      firstChildRef.current.focus()
    }
  }, [firstChildRef])

  return (
    <div className="App">
      {props.children.map((child, index) => {
        if(index === 0) {
          return {...child, ref: firstChildRef};
        }
        return child;
      })}
    </div>
  );
}