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

Question

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

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

可能吗？

Answer 1

在与代码斗争之后，我终于找到了一个 hack 来做到这一点。不知道有没有更好的方法，但我就是这样做的。您必须将此代码段放入要注入的特定组件中 data-attributes:

[@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 中，您可以根据您在渲染函数中设置的那些来使用 data-attributes。

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

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

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

Pass arguments to rendered element from HTML

reason

reason-react