Question

我有以下组件

///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>

我的网络包配置在https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9。当我打开我的页面时，所有脚本都从服务器加载，但没有任何作用。没有错误或警告。 Webpack编译和输出脚本。但在页面上我只能看到123.什么错了？

Answer 1

Sry，我暂时无法发表评论，但可以使用ReactDom.hydrate方法代替渲染。它应该适用于你的情况。

Answer 2

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

为什么反应不渲染元素？

2 个答案: