reactjs - React - 在组件中使用 ref 并将其传递给 props 中的父级

Question

更新:我的问题实际上是由于拼写错误造成的——如果您想在子组件和父组件中使用子元素 ref，一般方法可以正常工作。

这是一个有效的方法的工作示例:
https://codesandbox.io/s/rwj7z7o7oo

原帖:

我正在尝试将 ref 转发给父组件，同时还使子组件(这是一个类)中的函数可以访问该 ref。目前，我可以成功地将 ref 传递给父级，但在子级中无法再访问该 ref。

class Child extends React.Component {
    // Unable to access the forwarded ref here:
    componentDidMount() {
        console.log(this.props.forwardedRef); // null
    }

    render() {
        return <input type="text" ref={this.props.forwardedRef} />
    }
}

// Parent is able to access the ref:
const Parent = () => {
    const childRef = useRef(null);

    function handleClick() {
        console.log(childRef.current); // correctly ref's the input el
    }

    return (
        <Child forwardedRef={childRef} onClick={handleClick} />
    );
}

是否有另一种方法可以让我在 Child 和 Parent 中使用 ref？

Answer 1

useRef返回类似于实例变量类的值。在您的情况下，即使您设置了 ref，也不会导致组件呈现，因此 componentDidUpdate 不会运行。

此外，您还没有从 Child 组件返回任何内容。

class Child extends React.Component {
  // Unable to access the forwarded ref here:
  componentDidUpdate(prevProps) {
    console.log(this.props.forwardedRef); // null
    console.log(prevProps.forwardedRef); // null
  }

  render() {
    return (
      <React.Fragment>
        <input type="text" ref={this.props.forwardedRef} />
        <div>{this.props.count}</div>
        <input type="button" onClick={this.props.onClick} value={"Click"} />
      </React.Fragment>
    );
  }
}

// Parent is able to access the ref:
const Parent = () => {
  const childRef = useRef(null);
  const [count, setCount] = useState(0);

  function handleClick() {
    console.log(childRef.current); // correctly ref's the input el
    setCount(count => count + 1);
  }

  return <Child forwardedRef={childRef} count={count} onClick={handleClick} />;
};

Working demo