1

我已经按照文档和这篇博客文章进行了操作，但我正在努力让任何工作正常进行。

在本地，我收到以下错误：HEY, LISTEN! No valid DOM ref found. If you're converting an existing component via posed(Component), you must ensure you're passing the ref to the host DOM node via the React.forwardRef function.

所以我试图转发参考：

class ColorCheckbox extends Component {
  setRef = ref => (this.ref = ref);

  constructor(props) {
    super(props);
  }

  render() {
    const { key, children, color } = this.props;
    return (
      <button
        ref={this.setRef}
        key={key}
        style={{
          ...style.box,
          background: color,
        }}
      >
        {children}
      </button>
    );
  }
}

export default forwardRef((props, innerRef) => (
  <ColorCheckbox ref={innerRef} {...props} />
));

哪个正在工作，因为我能够console.log在ref我的父组件内部：

ColorCheckbox {props: Object, context: Object, refs: Object, updater: Object, setRef: function ()…} "ref"

但是，我仍然收到No valid DOM ref found....

这是一个简单的 Codesandbox 描述我的问题。

关于 Codesandbox：

我在此沙盒中遇到跨域错误（它们不会在本地发生）。如果您将第 14 行更改ColorCheckbox为跨域错误...

有任何想法吗？

4

1 回答 1

1

当您在基于类的组件上调用 forwardRef 并尝试通过 ref 属性传递 ref 时，它将不起作用。文档示例仅适用于常规 DOM 元素。而是尝试执行以下操作：

export default forwardRef((props, innerRef) => (
  <ColorCheckbox forwardRef={innerRef} {...props} />
));

我刚刚使用了一个任意名称，因此在本例中为 forwardRef，将 ref 作为道具传递。在基于类的组件中，我将按钮上设置 ref 的部分更改为：

const { key, children, selected, color, forwardRef } = this.props;
return (
  <button
    ref={forwardRef}
    key={key}
    style={{
    ...

他们在博客文章中介绍的以下方法仅适用于常规 DOM 元素和样式组件：

const MyComponent = forwardRef((props, ref) => (
  <div ref={ref} {...props} />
));

请参阅我的Codesandbox fork以查看工作示例。

于 2019-04-10T23:05:30.223 回答