Я столкнулся с очень неприятной проблемой: мне нужно создать компонент-значок, который будет размещен поверх пользовательского компонента.
Это моя первая попытка создать что-то подобное в React с HTML намного проще, потому что вы работаете напрямую с DOM.
В этом случае вместо этого мне нужно создать значок, который будет выделять новый компонент / функцию, когда вы нажимаете на него, открывается всплывающее окно с небольшим текст, который объясняет, что это за компонент, или его функциональность. Говорю вам об этом, потому что мне нужно прослушивать onClick, и невозможно использовать псевдоэлементы.
Основная идея
<BadgeComponent position="top left">
<CustomComponent />
</BadgeComponent>
Поскольку я не могу использовать псевдоэлементы который унаследует все свойства элемента CSS, я так думаю:
- не меняйте
CustomComponent, потому что каждый раз может быть другим BadgeComponent - это оболочка, которая создает div с position:relative (чтобы я мог разместить значок где угодно) BadgeComponent должен быть display: inline-block, иначе это изменит общий макет - Мне нужно взять свойства коробочной модели
CustomComponent, удалить из них и применить их к BadgeComponent. Это в основном потому, что margin s возятся с размером BadgeComponent, и расположение самого значка будет сложнее
В основном мне нужно взять свойства CSS элемента DOM, отображаемого из дочернего элемента компонент.
Подход
Итак, я экспериментировал с кодом до того, как пришел сюда, и моя первая попытка заключалась в том, чтобы динамически передать ref дочернему элементу компонент BadgeComponent с помощью этого фрагмента:
{React.Children.map(this.props.children, (element, idx) => {
if (idx > 0) return; // don't care if it has more childrens, at least for now.
return React.cloneElement(element, { ref: this.newFeature });
})}
Я также думал взять CustomComponent как опору BadgeComponent, например:
<BadgeComponent position="top left" target={ CustomComponent }>
Но я не Я (пока) не пошел по этому пути, потому что я думал, что в конце дня this.props.target это в основном то же самое, что и this.props.children, и на этом ничего не заработал. Я прав?
Я знаю, что в React у нас есть ref, чтобы получить ссылку на DOM, созданную из компонента, но в этом случае это не применимо, потому что я не применяю ref к компоненту который отображает HTML, я применяю его к CustomComponent, который клонируется и не передается в DOM.
Из моего эксперимента все работает нормально, если я передаю элемент HTML в экспериментальный код У меня есть div.box, который получает значок в нужном мне положении, но как только я передаю Button, я получаю следующую ошибку: Window.getComputedStyle: Argument 1 does not implement interface Element.
Я использую window.getComputedStyle, чтобы получить CSS свойства, которые мне небезразличны.
Мои исследования
Я искал в Интернете и увидел хороших реализация , которая, к сожалению, работает только со стилизованными компонентами или со стилями, определенными встроенными в <style>. Я не хочу использовать пакеты NPM как этот , потому что, во-первых, я считаю, что его можно реализовать без доступа к дополнительному пакету, а во-вторых, мне не очень нравится способ, которым липкий / значок get (при всем уважении, очевидно).
Я больше не знаю, где искать, я не являюсь опытным разработчиком JS / React (был разработчиком тем WP в течение 10 лет), так что, вероятно, есть некоторые основы c концепцию, которую я не понимаю?
Я читал о findDOMNode (внешний вид скоро будет устаревать) и forwardRef в экосистеме React, но я не думаю, что это способ go, я Я ошибаюсь?
Мне не нужен код копирования / вставки, хорошо, если вы так осторожны, чтобы разветвить codeandbox и поделиться решением, будет здорово, но я пытаюсь здесь научиться: есть способ получить ссылку на визуализированный элемент HTML из любого компонента?
Думая, что это недостающая часть, если я смогу добраться до DOM, мой код уже работает ?