Проблема рендеринга ReactJS для скриптов содержимого расширений браузера в Chrome - PullRequest
Новая
       35

Проблема рендеринга ReactJS для скриптов содержимого расширений браузера в Chrome

0 голосов
/ 16 мая 2019

Я сделал расширение для браузера, которое вставляет iframe в DOM, в котором есть html. Я пытался отобразить компонент React в iframe, но он не отображается, и я получаю следующую ошибку Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Я пытался рендерить и iframe, и даже напрямую в DOM через скрипты контента, но у меня все еще остается та же проблема. Я знаю, что вызывается функция рендеринга компонента, потому что я поместил в нее файл console.log, и он отображает сообщение; Я также отладил его, и точки останова останавливаются в функции рендеринга. Кроме того, я добавил методы жизненного цикла componentWillUpdate и componentDidUpdate, и они даже не называются. 

//Index.jsx
import React from "react";
import ReactDOM from "react-dom";

class Index extends React.Component{
  constructor(props){
    super(props);
  }

  componentWillUpdate(){
    console.log('componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('componentDidUpdate');
  }

  render() {
    console.log('render');
    return <div>Hello!</div>;
  }
}

ReactDOM.render(<Index/>, document.getElementById("g-root"))

// Including this code to show how I was adding the react component to the DOM if it is loaded immediately via manifest.json
// const app = document.createElement('div');
// app.id = "g-root";
// document.body.appendChild(app);
// ReactDOM.render(<Index />, app);


//webpack.config
const path = require('path');

module.exports = (env, args) => {
  return {
    mode,
    devtool,
    entry: {
      react: path.join(__dirname, './Index.jsx')
    },
    module: {
      rules: [{
        test: /\.jsx$/,        
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react', 'es2015']
          }
        }
      }]
    },
    output: {
      path: path.join(__dirname, './'),
      filename: 'react.bundle.js'
    }
  }
};

<!--This gets loaded into the iframe-->
<!DOCTYPE html>
<html>
  <head>  
  </head>

  <body>
    <div id="g-root"></div>
    <script src="react/react.bundle.js"></script>
  </body>
</html>

//manifest.json *included just to show that it has the same issue on page load.

{
"content_scripts":
  [{
  "js":["react/react.bundle.js"],
  "run_at": "document_end",
  "matches": ["<all_urls>"]
  }]
}

Следует отметить, что внедрение iframe и расширения в целом работало нормально, пока я не попытался добавить React в проект.

1 Ответ

0 голосов
/ 22 мая 2019

Оказалось, что это была проблема с внутренней библиотекой, связанной с рендерингом веб-компонентов с моими компонентами React.

...