Question

我有一个服务器渲染的反应组件，我正在尝试添加图表。它的工作方式是你必须有一个画布，然后执行类似的东西：

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

为了实现这一点，我必须在客户端执行此代码，因为DOM交互。使用componentDidMount将无法正常工作，因为它不会在服务器呈现的组件上调用。

任何帮助都将不胜感激。

Answer 1

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

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);
     }
},

加载服务器端呈现的React组件后执行脚本

1 个答案: