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

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 有一个接受 Dom.element 的 ReactDOMRe.render 函数。然后，如果您愿意，您可以自己定义 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 功能，如果您需要的话。

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

Render multiple components based on data attributes

reactjs

dom

reason

reason-react