Импорт JS/(X): импортировать компоненты React?

Я хочу импортировать компонент React из файла jsx в шаблон и отобразить его в шаблоне с помощью ReactDOM. Позже в производстве я хотел бы отправлять реакцию и все зависимости компонента только тогда, когда загружается сайт, на котором есть этот компонент.

Я создал компонент React следующим образом: editor.jsx

import * as React from "react";
import {Editor} from "draft-js-plugins-editor";
const plugins = [];

export class EditorComponent extends React.Component {

constructor(props) {
   super(props);
this.state = {
    editorState: EditorState.createEmpty(),
};
}
onChange(editorState)  {
this.setState({
        editorState,
    });
}
render() {
return (<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>);
}
}

http://www.phoenixframework.org/docs/static-assets предлагает требование синтаксис для доступа к экспорту модулей. Поэтому я добавил в свой шаблон <script>const editor = require("web/static/js/editor").EditorComponent</script> следующее. Однако это не работает, потому что браузер не может интерпретировать требование (или бранч не понимает его).

Я настроил бранч так:

plugins: {
babel: {
// Do not use ES6 compiler in vendor code
   ignore: [/web\/static\/vendor/],
    presets: ["es2015","react"]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js/editor.jsx": ["web/static/js/editor"]
}
},

Я немного потерялся здесь. Как это может быть сделано?


phoenix-framework brunch
person Christian S.    schedule 01.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Одна идея, которая приходит на ум, — создать JS-файл и импортировать его в нужный шаблон с тегом <script>. В том же шаблоне создайте пустой файл <div id=editor>. Затем в файле JS импортируйте React и ReactDOM и нужный компонент и используйте что-то вроде этого:

ReactDOM.render(
   <Editor/>,
   document.getElementById("editor")
)

Однако я не уверен, что правильно понимаю вашу проблему.

person Nikolay D    schedule 12.04.2018