JS/(X) import:导入 React 组件?

Question

我想从模板中的 jsx 文件导入一个 React 组件，并使用ReactDOM在模板中渲染它。在生产后期，我只想仅在加载具有该组件的站点时才发布 react 和组件的所有依赖项。

我创建了一个这样的 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>中添加了以下内容。但这不起作用，因为浏览器无法解释 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")
)

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