как сделать компоненты React с реквизитом от клиента - PullRequest
Новая
       13

как сделать компоненты React с реквизитом от клиента

0 голосов
/ 03 июля 2019

Я добавляю React в существующее приложение веб-форм asp.net.Я не хочу создавать среду узла внутри рабочего сервера.Я настроил свою среду разработки с помощью babel и webpack, и я могу успешно отобразить компоненты React в html на стороне клиента, включив html на стороне клиента и вызов React.render () в исходный код реагирования.Я хочу вызвать функцию рендеринга из html на стороне клиента, чтобы я мог передавать реквизиты компоненту.

Я попытался экспортировать функцию, которая принимает 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']
            }
          ]
        }
      }
    ]
  }
};

1 Ответ

2 голосов
/ 04 июля 2019

Webpack связывает ваш скрипт. Это означает, что он инкапсулирует его из внешней среды. Вы не можете вызывать компоненты или функции без создания конфигурации библиотеки .

Добавьте следующее (пример) в конфигурацию вашего веб-пакета: 

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

Переменная MyLibrary будет привязана к возвращаемому значению вашего файла ввода, если полученный вывод включен в качестве тега сценария на HTML-странице.

Есть даже документация по авторским библиотекам .

...