使用来自外部 JavaScript 的参数访问 react 的函数答案

【问题标题】：Access react's function with parameters from external JavaScript使用来自外部 JavaScript 的参数访问 react 的函数
【发布时间】：2020-12-15 02:50:24
【问题描述】：

是否可以在 UIKIT.notification 的消息参数中添加 onclick 事件？
类似这样的：

notif__undoDelete = (param) => {
    setTimeout(function(param) {
        UIkit.notification(
            `<div class="uk-flex uk-flex-middle uk-margin-medium-right">
                <span>Exercise Deleted.</span><a onclick="{here}" class="uk-button uk-button-primary uk-button-small uk-margin-auto-left">Undo</a>
            </div>`,
            { timeout: 6000, pos: "bottom-left" }
        )
    }, 800, param)
}

【问题讨论】：

标签： reactjs react-native uikit getuikit

【解决方案1】：

我用这个答案来解决我的问题
Call react component's function from external JavaScript function

我先在componentDidMount方法中添加：

componentDidMount () {
    var me = this
    window.undoDelete = () => {
        var external_me = this
        let param = JSON.parse(external_me.event.target.getAttribute("data-param"))
        me.undoDelete(param)
    }
}

我在某处有一个 undoDelete() 方法，当我调用我的 UIkit.notification 时，它会是这样的，我的 react 的 undoDelete() 方法将被调用。我还添加了 data-param 来传递参数。

UIkit.notification(
`<div className="uk-flex uk-flex-middle uk-margin-medium-right">
     <span>Item Deleted.</span>
     <a onclick="window.undoDeleteExternal()" data-param='`+ JSON.stringify(param) +`' className="uk-button uk-button-primary uk-button-small uk-margin-auto-left">Undo</a>
</div>`,
{ timeout: 6000, pos: 'bottom-left' }

)

【讨论】：