Question

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

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

有可能吗？

Answer 1

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

[@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道具呈现相同的组件。

将参数传递给HTML中的渲染元素

1 个答案: