开发者问题收集

无法让基本的 React 与 JSX 示例运行

2017-09-29
1081
reactjs

任何指点都将不胜感激。我是 React、JSX 和 Babel 的新手，只是想让一些基本的东西工作起来。我已经做了一段时间了，但还是走到了尽头。

这是我的 html 页面： 

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

这是我的“main.jsx”文件： 

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

我使用的是 Chrome 61。

如果我在脚本标记中包含 type="text/babel" 或 type="text/jsx"，我会收到一个异常：“Uncaught ReferenceError：addComponent 未定义”。

如果我在脚本标记上删除此类型属性，那么（当然）我会收到“unexpected token <”错误，因为 html/xml 不会被转译。

当我删除脚本标记上的 type 属性（用于 jsx/babel）并且将 addComponent 方法中的 html 括在引号中时，我不会收到任何错误，但最终我会在页面上的“根”div 而不是嵌入的标题元素中呈现文字字符串 

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

- 自然，但至少这告诉我我的小型 javascript 和 ReactDOM 库已导入并正在运行。

所以看起来问题是由于某种原因 JSX 转译没有发生。

<---- 更新 201710011830 ---->

我遇到的问题似乎与在我的 JSX 文件中的 javascript 函数（“addComponent”）中调用 ReactDOM.render 有关，该函数应该处理按钮 onclick 事件。如果我删除 addComponent 函数，使 main.jsx 如下所示： 

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

那么 h1 元素就会按应有的方式插入到页面上。 那么问题来了，为什么它不能按照我最初预期的方式工作？是不是因为我在原始 JSX 脚本中定义 addComponent 函数时使用的语法？

2个回答

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

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

bundle.js 是一个分发版，它打包了所有 React 组件和依赖项，并使用 webpack 将它们放在一起放在您的开发环境中。

Ravindra Ranwala
2017-09-30

将 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

Bruce Xu
2017-09-29