在常规网页中使用 React 组件答案

【问题标题】：Using a React component in a regular web page在常规网页中使用 React 组件
【发布时间】：2017-07-05 14:42:10
【问题描述】：

这是我的 React 组件的一个非常简化的版本：

my-panel.js (my-panel-bundle.js)

import React from 'react'
import { render } from 'react-dom'

class MyPanel extends React.Component {
  render () {
    <input type='text' />
  }
}

export default MyPanel

完整版由其他几个组件组成。我正在使用 webpack 为组件创建一个捆绑文件。现在我想在现有的 Web 应用程序中使用这个组件，它不是使用 React 实现的。我的挑战是，如何加载 React 模块，并在网页中创建该组件的实例？

我试过用RequireJS，像这样：

index.html

<!DOCTYPE html>
<html>
    <body>
        <div id='root'></div>
        <script src="require.js" data-main="index.js"></script>
    </body>
</html>

index.js

require.config({
    paths: {
        react: 'react',
        reactDom: 'react-dom',
        myPanel: 'my-panel'
    }
})

require(['react', 'reactDom', 'myPanel'], function(React, ReactDOM, MyPanel) {
    ReactDOM.render(
        React.createElement(MyPanel),
        document.getElementById('root')
    )
})

代码未能报告 MyPanel 未定义。谁能帮我找出丢失的部分？

【问题讨论】：

标签： reactjs ecmascript-6 requirejs

【解决方案1】：

首先，您忘记了 MyPanel 组件的渲染函数中的返回值。

class MyPanel extends React.Component {
  render () {
    return <input type='text' />
  }
}

回到主要问题。 MyPanel 未定义，因为包的路径不正确。假设你的项目目录如下：

- project/
    - index.html
    - index.js
    - bundle/
        - my-panel-bundle.js
    /... the rest

您的要求配置应如下所示：

require.config({
    paths: {
        react: 'react',
        reactDom: 'react-dom',
        bundle: 'bundle'
    }
})

require(['react', 'reactDom', 'bundle/my-panel-bundle'], function(React, ReactDOM, MyPanel) {
    ReactDOM.render(
        React.createElement(MyPanel),
        document.getElementById('root')
    )
})

另外，如果你使用 webpack，你实际上并不需要 require.js。而不是export default ...，放上ReactDOM渲染代码：

ReactDOM.render(
  React.createElement(MyPanel),
  document.getElementById('root')
)

在类定义之后并在您的 html 中包含捆绑脚本。

<!DOCTYPE html>
<html>
    <body>
        <div id='root'></div>
        <script src="./bundle/my-panel-bundle.js"></script>
    </body>
</html>

【讨论】：

您好，感谢您的帮助。我进行了您建议的更改，但仍然收到相同的错误消息：警告：React.createElement：类型无效-期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义.您可能忘记从定义组件的文件中导出组件。
这意味着您的路径仍然不正确。你能告诉我你的 React 项目的结构吗？
由于这只是一个测试项目（用于解决这个问题），我最初将所有文件都放在根目录中。现在我对其进行了更改，以便捆绑文件位于捆绑文件夹中。其余文件仍在根文件夹中，甚至 react.js 和 react-dom.js。我还更改了您指定的 require 调用： require(['react', 'reactDom', 'bundle/my-panel-bundle'], function(React, ReactDOM, MyPanel) { ... })
对不起，我忘记将 myPanel 更改为 bundle。尝试一下，我认为它应该可以工作。
嗯...仍然是完全相同的错误。你还有什么建议吗？再次感谢您的宝贵时间！