我有一个组件需要根据应用程序的状态加载不断变化的 Pinterest 嵌入内容。 Pinterest 嵌入由 <a>
组成标签被转换为 <span>
中的复杂布局通过使用 HTML 底部的异步脚本进行标记(可用 here )。但是,我无法弄清楚如何在使用更新的 Prop 重新渲染时清除旧的 <span>
嵌入并重新运行脚本以呈现新的嵌入。谢谢!
我的组件:
const PinterestEmbed = ({ location, size }) => (
<div stye="text-align: center;margin: auto;">
<a
data-pin-do="embedPin"
data-pin-width={size}
href={location}>
Pin via Pinterest
</a>
</div>
);
export default PinterestEmbed;
最佳答案
这里最简单的解决方案是切换到完整组件:
export default class PinterestEmbed extends Component {
// keep a reference to the link so we can update it:
linkRef = el => {
this.link = el;
};
// never re-render using virtual dom:
shouldComponentUpdate() {
return false;
}
// instead, we'll handle location changes ourselves:
componentWillReceiveProps(nextProps) {
if (nextProps.location!==this.props.location) {
this.link.href = nextProps.location;
// do something to tell Pinterest to update (not sure how they expose it):
Pinterest.reInitialize(this.link);
}
}
render({ location, size }) {
return (
<div stye="text-align: center;margin: auto;">
<a
ref={this.linkRef}
data-pin-do="embedPin"
data-pin-width={size}
href={location}>
Pin via Pinterest
</a>
</div>
);
}
}
关于javascript - 更新 Preact 应用程序中的 Pinterest 嵌入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45511418/