Question

这是我的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为组件创建一个bundle文件。现在我想在现有的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组件的渲染功能中的返回值。

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

来到主要问题。 MyPanel未定义，因为bundle的路径不正确。假设您的项目目录如下所示：

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

您的require配置应如下所示：

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中包含bundle脚本。

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

在常规网页中使用React组件

1 个答案: