Question

我正在将React添加到现有的asp.net Web表单应用程序中。我不想在生产服务器内部创建节点环境。我已经使用babel和webpack设置了开发环境，并且可以通过在客户端html中包含a和在react源代码中包含React.render（）调用来成功地将React组件呈现到客户端html中。我想从客户端html调用render函数，以便可以将props传递给组件。

我尝试导出一个带有mountnode和props的函数，并调用React.render（），但是我不知道如何

index.html

<b id="react_container">this is where react will live</b>

<script type="text/javascript" src="../Scripts/react/dist/bundledRODT.js"></script>

<script type="text/javascript">

            var reactElement = React.createElement('RODT', { data:"hello world" });
            ReactDOM.render(
                reactElement,
                document.getElementById('react_container')
            );
</script>

RODT.js

import LabelAndText from './LabelAndText.js'
import CheckBoxAndLabel from './CheckBoxAndLabel.js'
import {Component} from 'react'

class RODT extends Component {
  constructor(props){
    super(props);

    this.state = {}
  }

  render() {
    var {
      data,
      ...otherProps
    } = this.props

    return (
      <div id="RODT" key="RODT" {...otherProps}>
       <LabelAndText />
       <CheckBoxAndLabel />
       {data}
      </div>
    )
  }
}

export default RecordOnDockTable

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/RODT.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundledRODT.js'
  },
  module: {
    rules: [
      {
        test: path.join(__dirname, '.'),
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets:[
            '@babel/preset-env',
            '@babel/react',
            {
              'plugins': ['@babel/plugin-proposal-class-properties']
            }
          ]
        }
      }
    ]
  }
};

Answer 1

Webpack捆绑您的脚本。这意味着它从外部环境封装了它。您必须先创建library configuration，才能调用组件或函数。

将以下（示例）添加到您的Webpack配置中：

module.exports = {
  //...
  output: {
    library: 'MyLibrary'
  }
};

如果结果输出作为脚本标签包含在HTML页面中，则变量MyLibrary将与条目文件的返回值绑定。

甚至在authoring libraries上都有一个文档。

如何使用客户端的道具渲染React组件

1 个答案: