Question

在ReasonReact上，如果我想通过id在HTML元素上呈现特定元素，我可以使用内置函数renderToElementWithId(ReasonReact.reactElement, Dom.element)，例如：

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

我有多个<input /> HTML标记，我希望它在每个具有特定数据属性的<input />中呈现。更具体地说，我希望每个input上data-type="tags" <MyComponent />由document.querySelectorAll("[data-type=tags]")呈现。在Javascript上，我们可以执行{{1}}之类的操作，并迭代渲染组件的结果。

虽然，我在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函数。

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

1 个答案: