-1

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

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

可能吗？

4

1 回答 1

0

在与代码斗争之后，我终于得到了一个黑客来做到这一点。不知道是否有更好的方法，但这就是我所做的。您必须将此代码段放在要注入数据属性的特定组件中：

[@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这将使用不同的道具渲染相同的组件。

于 2018-04-04T11:30:36.140 回答