Javascript 与react外部的功能组件通信

我希望能够在普通HTML中从组件外部与我的react组件通信（由于将组件嵌入另一个系统而需要）

我一直在研究这一点，我看到了一些建议，您可以通过在渲染元素上添加ref将组件添加到

窗口中，如下所示：

  ReactDOM.render(
    <Hello
      ref={(element) => {
        window.helloComponent = element;
      }}
    />,
    rootElement
  );

ReactDOM.render(
{
window.helloComponent=元素；
}}
/>,
根元素
);

但对我来说，它不起作用，并产生以下警告：

js:27警告：不能为函数组件提供引用。尝试访问此ref将失败。您是想使用React.forwardRef（）吗

该组件不会添加到窗口对象中，因此从react组件外部的html按钮引用不起作用

我一直在尝试使用createRef（）将其添加到窗口的各种方法，但无法解决这个问题。我无法将forwardRef（）文档与我的当前情况联系起来

这是我的密码：


const rootElement=document.getElementById（“根”）；
if（rootElement）{
ReactDOM.render(
{
window.helloComponent=元素；
}}
/>,
根元素
);
}
函数Hello（）{
函数alertOne（）{
警报（“hi from 1”）；
}
返回(
你好，世界！
);
}
函数UpdateButton（）{
函数alertTwo（）{
警报（“hi from 2”）；
}
返回点击我里面的反应；
}

在外面点击我

const rootElement=document.getElementById（“根”）；
window.alertEvent=新事件（“警报”）；
if（rootElement）{
ReactDOM.render(
,
根元素
);
}
函数Hello（）{
函数alertOne（）{
警报（“hi from 1”）；
}
window.addEventListener（'alert'，alertOne）；
返回(
你好，世界！
);
}
函数UpdateButton（）{
函数alertTwo（）{
警报（“hi from 2”）；
}
返回点击我里面的反应；
}

在外面点击我
在窗口对象中保存函数：

const rootElement=document.getElementById（“根”）；
if（rootElement）{
ReactDOM.render(
,
根元素
);
}
函数Hello（）{
函数alertOne（）{
警报（“hi from 1”）；
}
window.helloComponentAlert=alertOne；
返回(
你好，世界！
);
}
函数UpdateButton（）{
函数alertTwo（）{
警报（“hi from 2”）；
}
返回点击我里面的反应；
}

常量handleClick=（）=>{
window.helloComponentAlert（）；
}
在外面点击我
这里是我创建的一个示例，您可以使用javascript中的事件发布-订阅模式传递一些值

一个问题是您的按钮输入错误：
helloconpont
。谢谢更新。不幸的是，这不是主要问题。