从 HTML 将参数传递给呈现的元素答案

【问题标题】：Pass arguments to rendered element from HTML从 HTML 将参数传递给呈现的元素
【发布时间】：2018-04-04 19:57:28
【问题描述】：

我有一个基于类在 HTML 上呈现的组件，其函数为 renderToElementWithClassName。我知道我可以将值传递给函数中的组件（renderToElementWithClassName(<FAQ param="value" />, "class");。但是，我需要能够在 HTML 上传递它，因为它将在不同的地方使用。像这样：

<body>
    <div class="class" data-param="value" />
</body>

有可能吗？

【问题讨论】：

标签： reason reason-react

【解决方案1】：

在为代码苦苦挣扎之后，我终于找到了一个技巧来做到这一点。不知道是否有更好的方法，但这就是我所做的。您必须将此 sn-p 放在要注入数据属性的特定组件中：

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

let renderByQuery = (query: string) => {
    let elements = querySelectorAll(query);

    elements |> Js.Array.forEach(e => {
        let yp = (e |> ReactDOMRe.domElementToObj)##dataset##yourprop;
        ReactDOMRe.render(ReasonReact.element(make(~yourProp={yp}, ())), e);
    });
};

然后，在你的主文件中：

YourComponent.renderByQuery(".custom_class");

现在，在您的 HTML 中，您可以根据您在渲染函数中设置的属性使用数据属性。

<div class="custom_class" data-yourprop="value1"></div>
<div class="custom_class" data-yourprop="value2"></div>

这将使用不同的yourProp props 渲染相同的组件。

【讨论】：