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

Question

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

我遇到的问题是，该窗口小部件仅在像正常的http页面一样加载页面时才起作用。 当我使用锚标记时，此小部件可以工作，但是对于Link，则不起作用，因为没有页面加载。

列表组件---- Link ---->属性组件

如何通过Link实现相同的行为？

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>

Answer 1

这是React Portal的基本示例。

Index.html

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

MyWidget组件

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;

现在，您可以使用MyWidget组件。 希望这可以帮助。 谢谢！

Answer 2

尝试实现类似这样的方法如何强制脚本重新加载并重新执行？ 在loadScript函数中，以便每次触发componentDidMount时，脚本将被强制重新加载，重新执行并获取正确的数据*。 希望有帮助

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

问题描述

2 个解决方案

解决方案1
1 2019-09-11 16:50:04

解决方案2
-1 2019-09-12 13:34:48

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

问题描述

2 个解决方案

解决方案1 1 2019-09-11 16:50:04

解决方案2 -1 2019-09-12 13:34:48

解决方案1
1 2019-09-11 16:50:04

解决方案2
-1 2019-09-12 13:34:48