时间戳

首页 > 解决方案 > 使用 props.children 时，在 useLayoutEffect 上未定义 Ref

reactjs - 使用 props.children 时，在 useLayoutEffect 上未定义 Ref

问题描述

我有一个最小的可重现示例，其中包含一个<Wrapper>包装<Base>. 目标是在渲染后立即获得焦点的输入字段。（代码笔）

由于包装器，函数inputRef.current中未定义useLayoutEffect。应用程序崩溃。

但是，当省略<Wrapper>组件时，一切正常。（代码笔 2）

错误代码：

function Wrapper({ children }) {
  <div className="wrapper">
    {children}
  </div>
}

function Base() {
  const inputRef = React.useRef();

  React.useLayoutEffect(() => {
    inputRef.current.focus();
  }, []);  
  
  return (
    <Wrapper>
      <input type="text" ref={inputRef} />
    </Wrapper>
  );
}

编辑：该问题目前无法在 codepen 中重现。这可能是因为 Wrapper 包含来自react-modal的组件

标签： reactjsreact-hooksuse-effect

解决方案

Wrapper没有返回任何东西，所以你最终在页面上什么都没有。解决方法是在Wrapper.

function Wrapper({ children }) {
  return (
    <div className="wrapper">
      {children}
    </div>
  );
}

PS，如果你检查开发者控制台，你会看到一个错误提示你渲染时没有返回任何东西。

推荐阅读