在常规网页中使用 React 组件

Question

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

我的-panel.js（我的面板-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 未定义。谁能帮我找出丢失的部分？

Answer 1

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

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。将 ReactDOM 渲染代码替换为 export default ...：

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

在 class 定义之后并在 html 中包含捆绑脚本。

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

在常规网页中使用 React 组件

Using a React component in a regular web page

requirejs

ecmascript-6

reactjs