Как заставить реагировать-позу работать с компонентами класса?
Я следовал за документация и этот пост в блоге, но я изо всех сил пытаюсь заставить что-нибудь работать.
Локально я получаю следующую ошибку: 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.inforef внутри моего родительского компонента:
ColorCheckbox {props: Object, context: Object, refs: Object, updater: Object, setRef: function ()…}
"ref"
Тем не менее, я все еще получаю сообщение (выше) No valid DOM ref found....
Вот простой Codesandbox, описывающий мою проблему.
О Codesandbox:
Я получаю ошибки разных источников в этой песочнице (они не возникают локально). Если вы измените строку 14 на ColorCheckbox, возникнет ошибка перекрестного происхождения...
Есть идеи?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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, чтобы увидеть рабочий пример.
@A7DC A7DC В документации по реакции упоминается, что это может произойти при загрузке библиотек из CDN, что может быть связано с тем, как Codesandbox загружает библиотеки, которые мы добавляем. Если одна из этих библиотек выдает ошибку, она отображается как ошибка из-за разных источников.
Рад, что смог помочь (:
Спасибо за подробный ответ! ?Есть идеи, почему возникает ошибка перекрестного происхождения?