如何使用新的可湿性粉剂WordPress/脚本webpack/巴别塔将不同的反应组件附加到不同的DOM根

由于WP现在带有嵌入核心的webpack/babel构建，因此很容易将React集成到WP中。我正在处理一个主题，并创建了我的React博客页面来列出我的所有帖子。工作完美！因为我使用的是“@wordpress/scripts”：“3.2.1”，所以我在多个组件中编写我的React文件，但我的主根应用程序位于src/index中。js文件。它连接到一个dom根。当我尝试为单个帖子的另一个模板创建第二个dom根时，我总是得到一个目标，而不是dom对象。所以我的问题是：使用WP Build Scripts包，如何创建多个React组件，并将它们附加到主题中不同页面模板上的多个唯一Dom根<所以我的主要索引。js文件当我编写第二个React Dom渲染以将完全不同的React组件附加到完全不同的Dom根时，它不起作用。我怎样才能成功地完成这项任务。我不想让他们成为古腾堡积木。因此，尝试将第二个React组件附加到完全不同的dom根元素是行不通的。get error目标容器不是DOM元素。

例如，我的src/index。js文件：

import PostList from \'./components/PostList\';
import SinglePost from \'./components/SinglePost\';


class App extends React.Component {
    render() {
      return (
        <div>
            <Header title="test title" />
            <PostList/>
        </div>
      );
    }
  }

ReactDOM.render(<App />, document.getElementById("app"));


class SinglePostApp extends React.Component {
    render() {
        return (
            <div>
               <SinglePost />
            </div>
        )
    }
}
ReactDOM.render(<SinglePostApp />, document.getElementById("spApp"));

module.exports = { ...defaultConfig, entry: { ...defaultConfig.entry, index: path.resolve( process.cwd(), \'src\', \'index.js\' ), singlePost: path.resolve( process.cwd(), \'src\', \'singlePost.js\' ) } };

相关推荐