Javascript 如何使反应路由器链接加载页面像锚标签？_Javascript_Reactjs_React Router

Javascript 如何使反应路由器链接加载页面像锚标签？

javascript reactjs

Javascript 如何使反应路由器链接加载页面像锚标签？,javascript,reactjs,react-router,Javascript,Reactjs,React Router,在我的一个组件上，我有一个外部小部件，它需要一个脚本标记和一个特殊的div元素。页面加载后，脚本将在div中插入iframe 我遇到的问题是，只有当页面像普通http页面一样加载时，小部件才能工作。当我使用锚定标签时，这个小部件可以工作，但是在链接中它不能工作，因为没有页面加载列表组件----链接-->属性组件如何通过链接实现相同的行为 App.js <Switch> <Route path="/" exact component={Home} /

在我的一个组件上，我有一个外部小部件，它需要一个脚本标记和一个特殊的div元素。页面加载后，脚本将在div中插入iframe

我遇到的问题是，只有当页面像普通http页面一样加载时，小部件才能工作。当我使用锚定标签时，这个小部件可以工作，但是在链接中它不能工作，因为没有页面加载

列表组件----链接-->属性组件

如何通过链接实现相同的行为

App.js

    <Switch> 
        <Route path="/" exact component={Home} />
        <Route path="/list" exact component={List} />
        <Route path="/property/:id/:sleeps/:start/:end" exact component={Property} />
        <Route component={Error} />
    </Switch>

List.js

<Link to={`/property/${property.id}/${property.sleeps}/${property.start}/${property.end}`}>
    <img src={property.image} alt={property.name}/>
</Link>

Property.js

componentDidMount = () => {
    //function inserts script to body
    this.loadScript('https://widgetSite.co.uk/components/embed.js');
}

//inside render
<div
    data-calendar-key="widget key"
    data-calendar-property-id={this.propID}
    id="calendar-js">
    Your widget will appear here.
</div>

componentDidMount=（）=>{
//函数将脚本插入到正文中
此.loadScript（'https://widgetSite.co.uk/components/embed.js');
}
//内部渲染
您的小部件将出现在此处。

以下是React门户的一个基本示例

Index.html

<body>
  <div id="root"></div>
  <div id="my-widget"></div>
</body>

现在可以使用MyWidget组件了。希望这有帮助。

谢谢

尝试在loadScript函数中实现类似的功能，这样每次触发componentDidMount时，脚本都将被强制重新加载、重新执行并获取正确的数据。我希望这有帮助

你试过吗？您可以使用门户渲染DOM层次结构之外的子级。@Ray不，我没听说过，现在将研究它。谢谢Ray，但我研究了它，不幸的是，我不认为这是解决它的方法。我的问题是，当移动到带有链接的属性页时，小部件脚本没有发送GET请求。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const Widget = document.getElementById('my-widget');

class MyWidget extends Component {
  state = { openWidget: false };

 //functions to open close widget

  render() {
    return ReactDOM.createPortal(this.renderWidget(), Widget);
  }

  renderWidget() { /*add your widget elements*/ }
}

export default MyWidget;