我有以下组件
///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.什么错了?
答案 0 :(得分:0)
Sry,我暂时无法发表评论,但可以使用ReactDom.hydrate方法代替渲染。 它应该适用于你的情况。
答案 1 :(得分:0)
https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9#file-webpack-conf-js-L9-L10 webpack.config.js
中的问题这会破坏浏览器中的javascript。我不知道为什么,但这是真的。