英文:
Re-render a React App when a property is updated by a third party source
问题
我可能在这方面做得不对，所以请随时纠正我。我在第三方网站上运行一个React小部件（可能有几个实例）。
我希望第三方能够传递一个会话ID（因此在初始渲染时可能不会有会话ID，或者可能会过期）。因此，他们可以大致这样使用小部件：-
<div class="container">
<div id="widgetone" class="react-widget" sessionid="abc"></div>
<div id="widgettwo" class="react-widget" sessionid="def"></div>
<div id="widgetthree" class="react-widget" sessionid="ghi"></div>
</div>
我的index.js代码如下:-
const widgetElements = document.querySelectorAll('.react-widget');
widgetElements.forEach(widget => {
// track onchange widget.attributes.sessionid.value
// onchange re-render so the new sessionid is passed
ReactDOM.render(
<React.StrictMode>
<App sessionid={widget.attributes.sessionid.value }/>
</React.StrictMode>,
div
);
});
我想要的是，如果sessionid属性的值发生变化，那么重新渲染该小部件。举个例子，"widgetthree"加载，但不会立即获得sessionid。当它到达时，第三方将sessionid属性设置为sessionid值（然后我在小部件内部使用它来进行一些API调用）。
是否有方法可以做到这一点？还是我应该以更好的方式解决这个问题？
英文:
I might be doing this the wrong way so feel free to correct me. I have a react widget (possibly several instances) running on a third party website.
I want the third party to be able to pass a session id (so the session id might not be there on initial render or might expire). So they could use the widget roughly like this:-
<div class="container">
<div id="widgetone" class="react-widget" sessionid="abc"></div>
<div id="widgettwo" class="react-widget" sessionid="def"></div>
<div id="widgetthree" class="react-widget" sessionid="ghi"></div>
</div>
My index.js has code like so:-
const widgetElements = document.querySelectorAll('.react-widget');
widgetElements.forEach(widget => {
// track onchange widget.attributes.sessionid.value
// onchange re-render so the new sessionid is passed
ReactDOM.render(
<React.StrictMode>
<App sessionid={widget.attributes.sessionid.value }/>
</React.StrictMode>,
div
);
});
What I want is if the sessionid attribute changes value then re-render that widget. As an example. "widgetthree" loads but doesn't get its sessionid immediately. When it arrives the third party sets the sessionid attribute to the sessionid value (I then use that inside the widget to make some Api calls)
Is there a way to do this? or is there a better way I should be solving this problem?
答案1
得分: 1
我建议使用React的useEffect钩子来实现你想要的功能。
这个钩子会在方括号中的值更新时重新渲染你的应用程序。
import React, { useEffect } from 'react';
const App = ({ sessionid }) => {
useEffect(() => {
// 无论你想要在更改时执行什么操作
if (sessionid) {
console.log(`更新的 ID: "${sessionid}".`);
}
}, [sessionid]); // 当会话 ID 更改时，效果将重新运行
return (
<div>Widget 内容</div>
);
};
export default App;
英文:
I would recommend using the react useEffect hook to do what you want.
This hook will rerender you app, whenever the value in the brackets is updated.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React, { useEffect } from 'react';
const App = ({ sessionid }) => {
useEffect(() => {
// What ever action you want to happen on the cahnge
if (sessionid) {
console.log(`updated id: "${sessionid}".`);
}
}, [sessionid]); // The effect will rerun whenever the session ID changes
return (
<div>Widget Content</div>
);
};
export default App;
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论