Как заставить реактивную позу работать с компонентами класса?

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...,

Вот простой Codesandbox, описывающий мою проблему.

О Codesandbox:

Я получаю ошибки перекрестного происхождения в этой песочнице (они не происходят локально). Если вы измените строку 14, чтобы быть ColorCheckbox ошибка перекрестного происхождения идет...

Есть идеи?

Answer 1

Когда вы вызываете forwardRef для компонента на основе классов и пытаетесь передать ref через атрибут ref, он не будет работать. Пример документации будет работать только для обычных элементов DOM. Скорее попробуйте сделать следующее:

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

Я только что использовал произвольное имя, поэтому в этом случае forwardRef, чтобы передать ссылку в качестве реквизита. В вашем компоненте, основанном на классе, я изменил часть, в которой ссылка установлена ​​на кнопке, так:

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, чтобы увидеть рабочий пример.