我有一个中等复杂的React应用程序，使用create-react-app创建，因此使用react-scripts来启动开发服务器。
我想开发一个新的React组件：一个中等复杂度的输入控件，可以让用户输入结构化的数据。2它将有按钮来添加新的条目到列表中，下拉菜单来从可用的选项中选择，等等。
这个组件不一定会出现在我的主React应用程序的首页;它可能需要几次点击来让应用程序显示它，使我可以有效地使用它。因此，**我希望能够在没有应用程序其余部分的情况下将组件放入浏览器，**并向它提供一些手工编码的测试数据。基本上，这是一个单元测试的交互式版本，这样我就可以只查看那个组件，然后决定我是否满意它的外观以及我戳它时它的功能。
我希望能够使用React开发服务器只在我的组件上工作，而不显示主应用程序的其余部分。我想创建一个文件，说明使用某些 prop 渲染我的组件，然后在浏览器中显示，并设置开发服务器的实时重载，这样我就可以在编写CSS时看到我在做什么。
我该怎么做呢？看起来React认为每个package.json对应一个网页和一个“应用程序”，但我找不到这样的方法，例如npm run start -- --page=my-component-demo.html我是否需要将我的项目变成一个包含多个相互连接的Node模块的monorepo，并将此组件放入其自己的create-react-app应用程序中，该应用程序可呈现演示页面吗？我是否需要将React路由添加到我的主应用程序中，并定义一些路由，而不是真实的的应用程序UI只呈现演示页面，并且希望让整个应用程序参与进来不会太慢开发服务器的重建？
1条答案
按热度按时间e3bfsja21#
我现在决定的解决方案是使用
react-demo为我想使用的每个控件定义一个测试台“demo”，<Demo/>控件最终拥有所有状态，我可以定义一些模拟状态，并将其双向绑定到我的组件要控制的任何对象。然后，我使用
react-demo-library定义一个组件，该组件表示一个充满所有演示的页面，这样我就可以选择要处理的组件。我使用Webapck的require.context循环访问所有名为.demo.js的文件，并将这些文件中的演示加载到演示库中，这样我就不必维护它们的中心列表。然后，我使用
react-router-domBrowserRouter将演示库放在应用中的某个URL上。这在生产构建中不太可能起作用，除非服务器协同工作，并且除了提供磁盘上存在的文件之外，还可以执行其他操作，但它可以与React dev服务器配合使用。最终结果是，在
react-demo-library中基于哈希的路由和到演示选择器页面的基于路径的路由之间，每个不同组件的每个演示页面都有自己的URL，并且React dev服务器实时重载工作正常;我可以编辑一个组件，即使页面需要刷新，我仍然会在浏览器中查看修改后的组件。理论上，开发服务器必须在每次构建时考虑我的整个应用程序，但实际上它仍然足够快。