Question

任何指针都将不胜感激。我是React，JSX和Babel的新手，我只想尝试一些简单的工作。我已经有一段时间了，而且我走到了尽头。

这是我的html页面：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Test React</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
        
        <script type="text/babel" src="../TestReact/res/js/main.jsx"></script>
    </head>
    
    <body>
        <div>Page to Test React Library</div>
        <p></p>
        <div>
            <button onclick="addComponent()">Add Component</button>
        </div>
        <p></p>
        <div id="root">
            
        </div>
        
    </body>
    
</html>

＆＃13;

这是我的＆＃34; main.jsx＆＃34;文件：

＆＃13;

addComponent = function (){
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
    );
};

＆＃13;

我使用的是Chrome 61.

如果我包含type =＆＃34; text / babel＆＃34;或者输入=＆＃34; text / jsx＆＃34;在我的脚本标记上，我得到一个例外：＆＃34;未捕获的ReferenceError：未定义addComponent＆＃34;。

如果我在脚本标记上删除了这个类型属性，那么（当然）我得到了一个错误＆＃34;意外标记＆lt;＆＃34;因为html / xml不会被转换。

当我删除了脚本标签上的type属性（对于jsx / babel）时，我将html放在引号中的addComponent方法中，然后我没有错误，但我最终得到了文字字符串

＆＃13;

"<h1>Hello, world!</h1>"

＆＃13;

在＆＃39; root＆＃39;的页面上呈现div而不是嵌入的头元素 - 当然，但至少告诉我我的小javascript和ReactDOM库是导入和工作的。

所以似乎问题是JSX转换不是出于某种原因发生的。

＆lt; ----更新201710011830 ----＆gt;

似乎我遇到的问题与在我的JSX文件中调用Javascript函数（＆＃34; addComponent＆＃34;）中的ReactDOM.render相关，该文件应该处理按钮onclick事件。如果我删除addComponent函数，以便main.jsx看起来像这样：

＆＃13;

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

＆＃13;

然后将h1元素插入到页面中。那么问题就变成了，为什么它会像我最初想要的那样起作用？是因为我用来在原始JSX脚本中定义addComponent函数的语法吗？

Answer 1

将type="text/babel"添加到脚本标记将转换main.jsx文件中的代码。我认为这种转换会影响你的addComponent函数，使你的代码无法正常工作。

您可以尝试将jsx或react组件代码放在main.jsx中，例如：window.Hello = <h1>hello</h1>;然后在html（或者main.jsx之外的某个地方），你可以写

  addComponent = function (){
    const Hello = window.Hello;
    ReactDOM.render(
        <Hello />,
        document.getElementById('root')
    );
  };

但我强烈建议使用webpack，一个简单的演示：https://github.com/yujiangshui/react-i18n-demo

Answer 2

您需要将bundle.js添加到index.html文件中，如下所示。

<body>
    ....
    <div id="root"></div>
    <script src="/bundle.js"></script>
</body>

bundle.js是包含所有反应组件和依赖项的发行版，并使用webpack将它们放在您的开发环境中。

无法通过JSX示例获得基本的React工作

2 个答案: