如何到达 3rd Party Dom 并与 React 交互答案

【问题标题】：How to reach 3rd Party Dom and interact with React如何到达 3rd Party Dom 并与 React 交互
【发布时间】：2017-09-27 21:16:58
【问题描述】：

我有一个 react 应用程序，它正在加载一个外部脚本，该脚本会向我的网站添加一个标题。

然后这个标题被添加到我的页面顶部，它只是纯 javascript 和 html。

但它不属于我的反应应用程序，它就在这个标题的正下方。

但我希望从我的 react redux 状态向这个 3rd 方标头添加某些信息。

如何通过 React 与放置在我的页面上的这个 3party div 进行交互？

即我当前的反应渲染

ReactDOM.render(
    <Provider store={store}>
            <Router history={browserHistory}>{routes(store, intl)}</Router>
    </Provider>,
    document.getElementById('app')
);

app html 类似于

<body>
 <header>Something I want to change with redux data</header>
 <div id="app"><div>
<body>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这取决于外部脚本的加载方式。如果它在您的 React 应用程序之前同步加载，那么您可以在您的 React 应用程序中执行以下操作：

componentDidMount() {
    let header = document.getElementsByTagName('header')[0];
    // Do something with the header...
}

【讨论】：

【解决方案2】：

有没有办法在你的 React 应用程序中添加标题？可能是这样的。

ReactDOM.render(
    <Provider store={store}>
            <header>store.getstate().reducerName.headerdata</header>
            <Router history={browserHistory}>{routes(store, intl)}</Router>
    </Provider>,
    document.getElementById('app')
);

【讨论】：