时间戳

首页 > 解决方案 > 为什么我们不能直接在浏览器中调用 ReactDOM 或 React？

javascript - 为什么我们不能直接在浏览器中调用 ReactDOM 或 React？

问题描述

我是 React 的新手，我仍在努力了解它是如何工作的。

我知道在“编译”之前的 React 代码中，我们可以使用React.createElement并ReactDOM.render执行各种操作，但是在代码编译并在客户端上运行之后，假设我想用我的一个组件动态创建一个新的 DOM 节点。

添加一些代码以进行进一步说明

这是我的 index.js：

import React from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends React.Component {

    render() {
        return (
            <div>
                Hello World!
            </div>
        )
    }

}

ReactDOM.render(
    //React Element,
    <HelloWorld />,
    //where to render the Element to
    document.getElementById('hello')
)

这工作正常。但是，当我尝试通过 devtools 控制台动态添加组件“实时”并键入React.createElement时，我得到：

React is not defined

与 ReactDOM 相同。它们不能通过控制台使用吗？我的理解中可能缺少一些东西，我正在考虑这个错误但是如果我的 index.js 能够调用，究竟是如何定义React而不是定义？谢谢！ReactDOMReactDOM.render

标签： javascriptreactjsreact-dom

解决方案

在以下情况下，可以在控制台中使用 React 和 ReactDOM：

  1. 你从 webpack 的入口点导出你在全局范围内需要的东西。例如：

    export {React, ReactDOM, LeaveStats }

  2. 从 webpack 生成的包通过非模块脚本包含在 HTML 页面中

  3. Webpack 配置为输出一个“库”，如下所示：

module.exports = {
    entry: './app/LeaveStats.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        library: 'ReactApp' // <-- this will allow us access to whatever is exported in ./app/LeaveStats.js
    },
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader' },
        ]
    },
    mode: 'development'
}

然后，您可以从全局范围访问和访问React，例如：ReactDOMLeaveStats

ReactApp.ReactDOM.render(
    ReactApp.React.createElement(ReactApp.LeaveStats), 
    document.getElementById("mydiv")
)

并不是说我真的会使用它，而是帮助我理解了一些事情。

推荐阅读