Question

我一直关注the documentation和this blog post，但我一直在努力使一切正常。

在本地，出现以下错误：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...的消息（上方）。

Here's a simple Codesandbox describing my issue。

关于代码和框：

此沙箱中出现跨源错误（它们不在本地发生）。如果将第14行更改为ColorCheckbox，则跨域错误会出现...

有什么想法吗？

Answer 1

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

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

我刚刚使用了一个任意名称，因此在这种情况下，forwardRef会将ref作为prop传递。在基于类的组件中，我将按钮上设置了引用的部分更改为：

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以查看有效示例。

如何使用类组件获得react-pose？

1 个答案: