明智地分离 JSX 文件模块

Question

我有 2 个 JSX 文件

1. Main.jsx

     ReactDOM.render(
    <SearchExample items={libraries} />,
    document.getElementById('container')
   

   );

   ReactDOM.render( , document.getElementById('container11') );

2. ParentComponent.jsx

   var ChildComponent = React.createClass({ 渲染：函数（）{ 返回 （ 向此按钮添加一个单击处理程序，以便在单击时在父组件中调用 performMagic。 做魔术 ); } });

   var ParentComponent = React.createClass({ 执行魔术：函数（）{ alert('TAADAH!'); },

    render: function () {
        return (
            <div>
                <ChildComponent onMagicClick={this.performMagic} />
            </div>
        );
    }
   

   });

这里我无法调用 ParentComponent。 注意：我不想使用 web pack 或其他捆绑包配置。 也不想使用脚本标签。

另外，我的主文件依赖于多个文件。例如 SearchExample.jsx、ParentComponent.jsx 等。

这里可能是 SearchExample.jsx 也依赖于其他一些包含静态值/配置/属性的文件。

如果没有任何其他库，我将无法使用 require 和 import。

Answer 1

你想要的它是不可能的。如果您不导入或将所有文件放在同一个文件中。也许解释更多你想做什么