Question

我想从模板中的jsx文件导入React组件，并使用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建议访问模块导出的require语法。所以我将以下内容添加到我的模板<script>const editor = require("web/static/js/editor").EditorComponent</script>中。这不起作用，因为浏览器无法解释require（或早午餐不能解决）。

我像这样配置了早午餐：

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"]
}
},

我有点迷失在这里。怎么办呢？

Answer 1

要想到的一个想法是创建一个JS文件，并使用<script>标记将其导入到您想要的模板中。在同一模板中，创建一个空<div id=editor>。然后，在JS文件中导入React和ReactDOM以及您想要的组件，并使用以下内容：

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

但是，我不确定我是否正确理解你的问题。

JS /（X）导入：导入React组件？

1 个答案: