Как создать и визуализировать React Component после babelify / транспортирования? - PullRequest
Новая
       63

Как создать и визуализировать React Component после babelify / транспортирования?

0 голосов
/ 16 мая 2019

У меня есть компонент hello world реагировать, который написан на JSX, перенесен с помощью babel, а затем включен в шаблон hello.html приложения Flask.Я работаю над созданием и рендерингом компонента перед его переносом следующим образом: 

const hello = <Hello  name="world" />;
ReactDOM.render(hello, document.getElementById('hello'));

Как я могу выполнить эти два шага в теге <script> в моем шаблоне hello.html?Моя цель - передать эту переменную имени из шаблона в компонент и затем отобразить ее.

Немного больше контекста:

JSX hello.js выглядит следующим образом: 

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div>Hello {this.props.name}!!!</div>
    )
  }
}

//The following works:                                           
//const hello = <Hello  name="world" />;
//ReactDOM.render(hello, document.getElementById('hello'));

hello.html выглядит так: 

<html>
  <head>
  </head>
  <body>
    <div>ASDF</div>
    <div id="hello"></div>
  </body>                           
  {# The following line is a post babelify (transpiled) hello.js #}
  <script type="text/javascript" src="{{ url_for('static', filename='js/hello.js') }}"></script>
  <script type="text/javascript">
    {#
      What goes here? The code in the above section does not work.
      The transpiled code defines a "var Hello = /*#__PURE__*/ function (_React$Component) { ...".
      const hello = Hello(); does not throw an error, but also does not render or pass an argument.
      hello.render(); is also something that I have tried, along with arguments for div/id to render in and name.
    #}
  </script>
</html>

Исправление: вызов Hello() не выдает ошибку, если сценарий text/babel, в этом случае сценарий, вероятно, не 'ничего не делать.

Маршрут Flask выглядит следующим образом: 

@app.route(u'/')
def index():
  return render_template(u'hello.html', name="universe")

1 Ответ

0 голосов
/ 16 мая 2019

Два способа передать переменные из серверного приложения в реагирующий компонент:

  1. Использовать html data-variable prop.

  2. Создатьглобальная переменная.Что-то вроде window.variable

Тогда вы сможете получить доступ к переменной как реквизит, такой как props.variable в вашем компоненте реагирования.

Мой рекомендуемый подход, который я бы выбрал, - это использовать пакет, такой как SystemJS (версия 2), и у вас будет что-то вроде следующего: 

    <!DOCTYPE html>
    <html>
    <head>
        <script src="node_modules/core-js-bundle/minified.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script type="systemjs-importmap" src="systemjs.imports.json"></script>
        <script src="node_modules/systemjs/dist/system.min.js"></script>
        <script src="node_modules/systemjs/dist/extras/named-exports.min.js"></script>
        <script>
            System.import('../.playground/index.js').catch(function (err) { console.error(err); });
        </script>
    </head>
    <body>
        <div>ASDF</div>
        <div id="hello"></div>
    </body>
    </html>

И index.js будет выглядеть как-товот так 

ReactDOM.render(
    (< Hello/>),
    document.getElementById('app')
);

Тогда ваша systemjs-importmap будет выглядеть так 

{
  "imports": {
    "react": "../node_modules/react/umd/react.production.min.js",
    "react-dom": "../node_modules/react-dom/umd/react-dom.production.min.js",
    // ... other named exports you want to add like the Hello component here
  }
}
...