为什么反应不渲染元素？答案

【问题标题】：Why react not render element?为什么反应不渲染元素？
【发布时间】：2018-05-30 16:43:29
【问题描述】：

我有以下组件

///assets/js/app.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    render() {
      return (
        <div className="greeting">
          <h1> Hello World! </h1>
        </div>
      );
    }
  }
ReactDOM.render(<App />, document.getElementById('root'));

和html

<!--/templates/layout/app.html.eex-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Hello Sandbox!</title>
    <%= if Mix.env == :dev do %>
      <link rel="stylesheet" href="http://domain:8080/styles.css">
    <% else %>
      <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
    <% end %>

  </head>

  <body>
    <div id="root">123</div>
     <%= if Mix.env == :dev do %>
      <script src="http://domain.ru:8080/app.js"></script>
    <% else %>
      <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
    <% end %>
  </body>
</html>

我的 webpack 配置在这里 https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9 。当我打开我的页面时，所有脚本都是从服务器加载的，但没有任何效果。没有抛出错误或警告。 Webpack 编译并输出脚本。但是在页面上我只能看到 123。怎么了？

【问题讨论】：

我假设你正在执行 npm run start 或 yarn start 或类似的编译代码
所有编译和加载。但不是在浏览器中。
浏览器不是关闭了js吗？在开发工具中
不，js已启用
浏览器可能缓存的 app.js 文件。或者没有指向正确的文件。

标签： javascript reactjs elixir phoenix-framework

【解决方案1】：

抱歉，我还不能发表评论，但可以使用ReactDom.hydrate 方法代替渲染。它应该适用于您的情况。

【讨论】：

【解决方案2】：

webpack.config.js 中的问题https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9#file-webpack-conf-js-L9-L10 这破坏了浏览器中的 javascript。我不知道为什么，但这是真的。

【讨论】：