React 组件未在 Play 应用程序中呈现答案

【问题标题】：React Component not rending in Play appReact 组件未在 Play 应用程序中呈现
【发布时间】：2017-08-07 19:28:22
【问题描述】：

我有一个 Play/scala/sbt 项目，并在 app/assets/javascripts/nav.jsx 保存了以下 React 组件：

class Nav extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="@routes.MainViewController.index" id="logo">@Messages("application.banner")</a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="@routes.MainViewController.index">@Messages("application.home")</a></li>
                            <li><a href="@routes.MainViewController.about">@Messages("application.about")</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}
ReactDOM.render(
    <Nav />,
    document.getElementById('nav')
);

在我的main.scala.html 文件中：

@(title: String)(body: Html)(webJarAssets: WebJarAssets)(implicit messages: Messages)
<!DOCTYPE html>
<html lang="en">
    <head>
        @* Here's where we render the page title `String`. *@
        <title>@title</title>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="@routes.MainJsonController.javascriptRoutes" type="text/javascript"></script>

        <link rel="stylesheet" href='@routes.WebJarAssets.at(webJarAssets.locate("css/bootstrap.min.css"))'>
        <link rel="stylesheet" href='@routes.WebJarAssets.at(webJarAssets.locate("css/bootstrap-theme.min.css"))'>
        <link rel="stylesheet" href='@routes.WebJarAssets.at(webJarAssets.locate("css/font-awesome.min.css"))'>
        <script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("jquery.min.js"))'></script>
        <script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("js/bootstrap.min.js"))'></script>
        <script type="text/javascript" src='@routes.WebJarAssets.at(webJarAssets.locate("react.js"))'></script>
        <script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("react-bootstrap.min.js"))'></script>
        <script type="text/javascript" src='@routes.WebJarAssets.at(webJarAssets.locate("react-dom.js"))'></script>

    </head>
    <body>
            <div class="container">

            <div id="nav"></div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-10">
                        @body
                        </div>
                    </div>
                </div>
            </div>
    </body>
</html>

所以，我的导航栏没有出现。我期待组件在<div id="nav"></div> 处呈现。我可能做错了什么？

资产路线

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

我觉得我需要将组件包含为脚本：

<script type="text/javascript" src='@routes.Assets.versioned("/javascripts/nav.jsx")'></script>

这使得整个页面没有编译错误，但组件仍然没有出现。

我在第 7 行遇到了一个异常，第一个 <nav> 标记从这里开始。

Uncaught SyntaxError: Unexpected token <

当我更正包含 <script type="text/javascript" src='@routes.Assets.versioned("javascripts/nav.js")'></script> 并将其放置在我的结束 </body> 标记下方时，我现在得到了这个：

Uncaught Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (react.js:18354)
    at Object._registerComponent (react.js:11047)
    at Object._renderNewRootComponent (react.js:11070)
    at Object.wrapper [as _renderNewRootComponent] (react.js:12353)
    at Object._renderSubtreeIntoContainer (react.js:11150)
    at Object.render (react.js:11170)
    at Object.wrapper [as render] (react.js:12353)
    at nav.js:25

【问题讨论】：

我不认为 play 会编译你的反应组件或类似的东西。我现在没有反应，但是 assets 文件夹中的脚本你必须在模板上链接它们才能使用。
看看这里可能会给你更具体的帮助：link

标签： javascript scala reactjs playframework react-bootstrap

【解决方案1】：

我做了以下更改：

在路径的开头插入了一个正斜杠，即/javascripts而不是javascripts
将.jsx 替换为.js
将我的脚本放在 .scala 模板的底部，就在我的结束正文标记之前，而不是在我的 <head> 中

结果：

<script type="text/javascript" src='@routes.Assets.versioned("/javascripts/nav.js")'></script>

终于，我的导航栏正确渲染了。

【讨论】：