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

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

1 голос
/ 10 апреля 2019

Я следовал документации и этой записи блога , но я изо всех сил пытаюсь заставить что-нибудь работать.

Локально, я получаю следующую ошибку: 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, то возникнет перекрестная ошибка ...

Есть идеи?

1 Ответ

1 голос
/ 11 апреля 2019

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

...