加载服务器端渲染的React组件后执行脚本

Execute script after loading server side rendered React component

本文关键字：组件 执行 脚本 React 服务器端 加载      更新时间：2023-09-26

我有一个服务器渲染的react组件，我正试图向其中添加一个图表。它的工作方式是，你必须有一个画布，然后执行以下操作：

var context = document.getElementById('chartId').getContext('2d');
var chart = new Chart(ctx).Pie(data);

为了实现这一点，由于DOM交互，我必须在客户端执行此代码。使用componentDidMount也不起作用，因为它不会在服务器渲染的组件上被调用。

如有任何帮助，我们将不胜感激。

您可以在客户端重新呈现组件，如下所示：

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        React.render(<RequestView /> ,
            document.getElementById('reactmount')
        );
    }
}

带有

componentDidMount: function(){
     if(window){
          var context = document.getElementById('chartId').getContext('2d');
          var chart = new Chart(ctx).Pie(data);
     }
},
相关文章：