如何使用类组件获得反应姿势

Question

我已经遵循了文档和这篇博文，但我正在努力使任何事情正常工作。

在本地，我收到以下错误：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...的消息(上面(。

这是一个描述我问题的简单代码沙箱。

关于代码沙盒：

我在此沙盒中收到跨源错误(它们不会在本地发生(。如果将第 14 行更改为ColorCheckbox则跨源错误...

有什么想法吗？

Answer 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} />
));

请参考我的代码沙盒分支以查看工作示例。