React Hooks - 将 ref 传递给孩子以使用 ScrollIntoView

Question

我有两个组件。一个父母和一个孩子。

在父组件内，我有一个按钮。如果用户单击该按钮，我想对子组件内的另一个按钮执行 ScrollIntoView。

我想我想定义对子按钮 a 的引用，以便我在父按钮 onClick 中可以执行以下操作：

ref.scrollIntoView({block: 'end', behavior: 'smooth'});

这将滚动到子组件中的按钮。

这是一个缩小的例子：

父组件.jsx

import React, {useRef} from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = props => {
  const childReference = useRef(null);

  const onClick = () => {
    childReference.scrollIntoView({block: 'end', behavior: 'smooth'});
  }

  return (
    <>
      <...some other components>
      <Button onClick={onClick}>Click me to be forwarded</Button>
      <ChildComponent ref={childReference}/>
    </>
  );
};

子组件.jsx

import React from 'react';

const ChildComponent = (props, ref) => {

  const { name, value, description } = props;

  return (
    <...some other components>
    <Button ref={ref}>You should be forwarded to me</Button>
  );
};

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  value: PropTypes.number,
  description: PropTypes.string,
};

ChildComponent.defaultProps = {
  value: 0,
  description: '',
};

export default React.forwardRef(ChildComponent);

我知道上面的代码不起作用，这只是为了说明我想要实现的目标。

我真的尝试了通过谷歌搜索找到的所有其他解决方案，它们看起来都很简单，但它们似乎都不适用于我的用例。我也尝试过使用 forwardRef ，但这也不能解决我的问题。

更新

我想我对什么不起作用有点含糊。我在实现中收到了很多不同的错误消息。

以下是其中之一：

不能给函数组件提供 refs。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？

解决方案

好的。我想我会用@Vencovsky 提供的解决方案在这里组装这些部件。

这是问题中看到的两个示例组件的完整实现：

父组件.jsx

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = props => {
  const childReference = useRef(null);

  const scrollIntoView = () => {
    childReference.current.scrollIntoView({block: 'center', inline: 'center', behavior: 'smooth'});
  }

  return (
    <>
    <...some other component>
    <Button onClick={scrollIntoView}>Click me to be forwarded</Button>
    <ChildComponent ref={childReference}
    </>
  );
};

export default ParentComponent;

子组件.jsx

import React, {forwardRef} from 'react';
import PropTypes from 'prop-types';

const ChildComponent = forwardRef((props, ref) => {
  const { name, value, description } = props;

  return(
    <>
      <...some other components>
      <Button ref={ref}>You should be forwarded to me</Button>
    </>
  );
});

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  value: PropTypes.number,
  description: PropTypes.string,
};

ChildComponent.defaultProps = {
  value: 0,
  description: '',
};

export default ChildComponent;

Answer 1

编辑2：

我猜你正在做类似的事情

const ChildComponent = (props, ref) => { ... }

ChildComponent.propTypes = { ... }

export default React.forwardRef(ChildComponent)

但是你需要做的是通过propTypesafter React.forwardRef，像这样：

const ChildComponent = (props, ref) => { ... }          

const ForwardComponent = React.forwardRef(ChildComponent)

ForwardComponent.propTypes = { ... }

export default ForwardComponent

一个更好的方法是

//                     using forwarRef
const ChildComponent = React.forwarRef((props, ref) => {

  const { name, value, description } = props;

  return (
    <...some other components>
    <Button ref={ref}>You should be forwarded to me</Button>
  );
});

这样您就不需要更改propTypes和创建另一个组件。

编辑：

作为您的编辑，我可以看到您忘记使用React.forwardRef.

你应该添加

export default React.forwardRef(ChildComponent)

到您的ChildComponent文件（使用 forwardRef 导出）。

什么不工作？你有错误吗？你应该更好地解释发生了什么，但我会试着猜测。

有一些事情可以使它不起作用。

1. 你需要使用ref.current.foo而不是ref.foo
2. 正如@JeroenWienk 所说：

   看来你的按钮也是一个自定义组件。你确定 ref 被传递给里面的 html button 元素吗？

3. 要使用功能组件的第二个参数，您应该使用React.forwardRef. 例如export default React.forwardRef(ChildComponent)