Рендеринг нескольких компонентов на основе атрибутов данных

Question

В ReasonReact, если я хочу визуализировать определенный элемент в элементе HTML, id Я могу использовать встроенную функцию renderToElementWithId(ReasonReact.reactElement, Dom.element), например:

ReactDOMRe.renderToElementWithId(<MyComponent />, "myComponent");

У меня есть несколько <input /> HTML-теги, и я хочу, чтобы он отображался в каждом <input /> который имеет определенный атрибут данных. Более конкретно, я хочу, чтобы каждый input у которого есть data-type="tags" на это будет оказано <MyComponent />, На Javascript мы могли бы сделать что-то вроде document.querySelectorAll("[data-type=tags]") итерируйте результат рендеринга компонентов.

Хотя я не могу найти ни в документации ReasonReact, ни в BSB о том, как это сделать. Кто-нибудь может мне помочь?

Заранее спасибо.

Answer 1

ReasonReact имеет ReactDOMRe.render функция, которая принимает Dom.element, Вы можете определить querySelectorAll себя, если хотите

[@bs.val] [@bs.scope "document"]
external querySelectorAll : string => Dom.element = "";

querySelectorAll("[data-type=tags]")
|> Js.Array.forEach(element => ReactDOMRe.render(<MyComponent />, element));

Или вы можете использовать bs-webapi, который дает вам querySelectorAll вместе с целой кучей других функций DOM, если они вам нужны.