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

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 函数。