根据数据属性渲染多个组件

Question

在ReasonReact上，如果我想通过id在HTML元素上呈现特定元素，我可以使用内置函数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函数。