使用 vanilla js 在 React.js 中加载图标，永远不会调用 componentDidMount答案

【问题标题】：Loading icon in React.js with vanilla js, componentDidMount is never called使用 vanilla js 在 React.js 中加载图标，永远不会调用 componentDidMount
【发布时间】：2018-01-03 14:01:42
【问题描述】：

尝试在我的 React.js 项目中创建加载图标（应用程序构建在 React 中，从 Wordpress REST API 获取数据并使用 Flux 处理状态）。但是 componentDidMount() 永远不会被触发，所以我的加载图标永远不会消失。这是我的 app.js：

class App extends Component {

  templates = {
    'about': About,
    'contact': Contact,
    'archive': Archive
  }

  buildRoutes(data){
    return data.pages.map((page, i) => {
      return(
        <Route
          key={i}
          component={this.templates[page.slug]}
          path={`/${page.slug}`}
          exact
        />
      )
    })
  }

  run(){
    DataActions.getPages((response) => {
      render(
        <div>
          <div className="loaderSmall" id="loaderSmall">
            <div className="pixel-loader"></div>
          </div>
          <Router>
            <div>
              <Header />
              <Switch>
                <Route path="/" component={Home} exact />
                {this.buildRoutes(response)}
                <Route render={() => { return <Redirect to="/" />}} />
              </Switch>
              <Footer />
            </div>
          </Router>
        </div> , document.getElementById('app')
      );
    });
  }

  componentDidMount() {
    window.addEventListener('load', this.handleLoad);
    console.log("componentDidMount");
  }

  // Fade out site-loader
  handleLoad() {
    console.log("CALLED");
    var fadeTarget = document.getElementById("loaderSmall");
    var fadeEffect = setInterval(function () {
      if (!fadeTarget.style.opacity) {
          fadeTarget.style.opacity = 1;
      }
      if (fadeTarget.style.opacity < 0.1) {
          clearInterval(fadeEffect);
      } else {
          fadeTarget.style.opacity -= 0.1;
      }
    }, 1000);
  }
}

..我没有收到任何错误：

【问题讨论】：

你的淡出对我有用，你有什么错误吗？？
没有noo错误:(@AlejandroMontilla
我已经发布了一个答案，问题可能是render() 方法。试试看，然后告诉我。
所有浏览器都支持事件“load”吗？
@Sulthan 我想是这样，当我在另一个项目中添加 handleLoad() 时它可以工作 - 所以这似乎是我的项目中从未调用 handleLoad() 的问题:(

标签： javascript reactjs loader flux

【解决方案1】：

您的代码一开始对我来说看起来不错，但是当我仔细观察时，我可以看到您的代码缺少 render() 方法。我添加了一个“存根”渲染，它工作正常。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    
</head>
<body>

    <div id="app"></div>
    <img id="loaderSmall" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

    <script type="text/babel">
        
      class App extends React.Component {
      
        // When Component has rendered, window.addEventListener adds event "load" and calls handleLoad function
        componentDidMount() {
          window.addEventListener('load', this.handleLoad);
        }
      
        // Fade out site-loader
        handleLoad() {
          var fadeTarget = document.getElementById("loaderSmall");
          console.log(fadeTarget);
          var fadeEffect = setInterval(function () {
              if (!fadeTarget.style.opacity) {
                  fadeTarget.style.opacity = 1;
              }
              if (fadeTarget.style.opacity < 0.1) {
                  clearInterval(fadeEffect);
              } else {
                  fadeTarget.style.opacity -= 0.1;
              }
          }, 300);
        }
        
        render(){return <div></div>}  // This was missing
      }
       
      ReactDOM.render(
          <App/>,
          document.getElementById("app")
      )
        
    </script>

</body>
</html>

【讨论】：

我的 render() 方法在“run()”方法中，我正在使用通量从 wordpress rest api 获取后端数据 - 这是我知道获取数据的唯一方法..但它对你有用真是太好了！这意味着我只需要弄清楚我的配置:)
好吧，我只是一个 React 初学者，以这种方式放置 render 对我来说是新的。但是，如果您这样做是为了从后端获取数据，您可以在您的类中尝试 this.state 并使用“常规”渲染。这对您的情况有意义吗？
我会努力的！ @亚历杭德罗
也没有用 :( 发生了一些事情，所以我的 handleLoad 函数没有被调用 .. @Alejandro
@fransBernhard 你能发布你更新的代码吗？或分享一些链接，以便我可以看到您的代码？