ReactDom没有定义?

时间:2017-07-08 07:01:36

标签: javascript reactjs react-dom

enter image description here我正在尝试在reactjs中编写一个基本程序

namespace RunwayMedlinc
{
class Print
{
    private System.Windows.Forms.DataGridView pview;
    private System.Drawing.Printing.PrintDocument dokumento;
    private bool p;
    private bool p_2;
    private string p_3;
    private System.Drawing.Font font;
    private System.Drawing.Color color;
    private bool p_4;

    public Print(System.Windows.Forms.DataGridView pview, System.Drawing.Printing.PrintDocument dokumento, bool p, bool p_2, string p_3, System.Drawing.Font font, System.Drawing.Color color, bool p_4)
    {
        this.pview = pview;
        this.dokumento = dokumento;
        this.p = p;
        this.p_2 = p_2;
        this.p_3 = p_3;
        this.font = font;
        this.color = color;
        this.p_4 = p_4;
    }

    internal bool DrawDataGridView(System.Drawing.Graphics graphics)
    {
        throw new NotImplementedException();
    }
}
}

上述程序运行正常。但是当我将脚本文件中的内容移动到单独的app.jsx文件时,它会显示未定义reactDom的错误。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> 
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
        );
    </script>
</body>
</html>

和我的app.jsx看起来像:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> 
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel" src="app.jsx">

    </script>
</body>
</html>

2 个答案:

答案 0 :(得分:9)

全局为ReactDOM(注意DOM全部为大写)。

答案 1 :(得分:0)

正确的语法是ReactDOM.render

见下面的例子:

ReactDOM.render(
    <h1>Hello React!!!</h1>,
    document.getElementById('example')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="example"></div>