问题标签 [react-boilerplate]

我花了一段时间玩弄react-boilerplate，阅读文档，搜索网络等。我构建了一些简单的组件和容器没问题。

我有大量代码可以创建 DOM 节点并使用 javascript 返回它们。举个简单的例子

我的代码进行了大量的 DOM 操作，添加表格行、删除行和列、移动行、从远程源获取数据。除了使用 jquery 的 ajax 调用外，它都是用 javascript 编写的。

我的问题是如何调用并将返回的节点放入容器中？

这是尝试在容器中添加 js 创建的节点的简化示例：

当涉及到提供的操作方法需要参数的按钮的 onClick 处理程序时，我无法使用 Enzyme 的 contains 方法。我在将 redux 操作传递给组件时遇到了这个问题，但我将在这里使用简化的示例。

假设您有两种方法：

您将它们传递给一个组件，并且在该组件中您有两个按钮：

当我测试第一个按钮时，没有问题：

它通过了。但是，第二个：

失败并显示无用的输出：

我试图通过尝试各种比较来了解更多信息，例如：

这导致：

我使用 Jest 作为测试运行程序，并且在 create-react-app 和 react-boilerplate 设置中都遇到了这个问题。知道我做错了什么吗？

编辑

我将在下面的答案中给出我自己的解决方法。我将在那里使用我的实际代码而不是这些示例。但是，我仍然很好奇为什么这里的测试失败了....

I use the current version of react-boilerplate (which uses webpack) and installed Semantic-UI-React like described in the official docs http://react.semantic-ui.com/usage

When I start the server I get:

What kind of 'appropriate loader' do I need?

The parser doesn't like the @import statement in /semantic/dist/semantic.min.css:

How to resolve this issue?

我创建了一个主要基于react-boilerplate的应用程序。

但是由于某种原因，在通过 LOCATION_CHANGE redux 操作进行第二次路由更改后，历史对象不会更新为新位置。

URL 会更改以匹配新位置，并且 redux 存储会更新以反映路由更改，但历史对象仍将以前的位置显示为当前位置。我已经尝试解决这个问题好几天了，我确信这是我完全忽略的微不足道的事情。

这是我的routes.js文件：

这是应用程序的入口点：

知道是什么原因造成的吗？非常感谢

我有一个组件，根据传递给它的道具，呈现不同的子组件。

我正在使用 jestjs 进行测试，并且我想断言“父”组件根据父组件中传递的道具呈现适当的子/子。

一个简化的片段：

父组件

考试

我尝试了各种方法来断言这一点，但没有运气。

我知道如何使用 find 方法 - 例如 - 搜索 adiv或 a h3，但我想针对反应组件而不是子节点呈现的根 DOM 节点测试子节点，因为它可能是不同组件中的相同 DOM 节点.

––––––––––––––––––– 编辑：–––––––––––––––––––––––––––––</p>

使用

实际上完美地工作

我的组件不符合规范。

我对这个工具有一个奇怪的问题 https://github.com/kriasoft/react-static-boilerplate

我有一个 React-redux-wepback 应用程序并想构建为静态站点

从 github 克隆 react-static-boilerplate 项目并安装所有依赖项并使用 $ yarn start 后，除了一件事外一切正常，当我单击“关于”按钮时，它不会将我重定向到 /about 它只是更改地址并留在家中页，

当我使用 $ yarn build 并将所有文件从公共文件夹复制到我的主机时，它工作得非常完美

但我想在我的 vps 上以开发模式（纱线启动）测试它，但有一些奇怪的东西

我的 routes.json 片段

但是如果我将我的路线 json 更改为

/关于在开发模式下工作（纱线启动）但在纱线构建和复制到静态文件到托管后不工作

我不明白那个块选项，请帮忙？

或者也许有比样板工具更简单的方法来将 React 应用程序转换为可以在基本托管（无 VPS 等）上工作的静态应用程序？

I am building an e-commerce related product and there are two types of users (customer & seller). Both types of user have their own homepage (totally different to each other). Now I want to route / on customer homepage if customer is logged-in or to seller homepage if seller account is logged-in. Otherwise it should route to landing page. How can I achieve this feature using react-router and this boilerplate?

I tried to do something as follows (but it didn't work):

我将此添加到生产配置中：

但我仍然遇到错误，比如ReferenceError: Menu is not defined.我错过了什么吗？当我将相同的内容添加到开发配置中时，一切都在本地运行良好，所以我有点困惑。

我有一个使用 构建的 React 应用程序react-boilerplate，但我不确定处理身份验证的最佳方式。这是我的问题：

1. 如果用户进行身份验证，他们的令牌将存储在 localStorage 中。如果他们离开应用程序并返回，状态将被清除，因此我将不得不再次获取他们的个人资料图片等，并通过 ping 服务器检查其令牌的到期/有效性。我在哪里做这个？onEnter将它添加到每条路线的功能是没有意义的。

2. 在每次后续路由更改时，显然都会从服务器获取数据。页面上加载的每条数据（可能是图表、产品、帐户信息等）都将授权用户，因为令牌是在每个请求的标头中发送的。如果一条或所有路由未经授权返回，我是否重定向它们？使整个页面呈现错误？只需在未经授权的一个/多个部分上显示未经授权的错误？？不知道这是如何工作的。

在对 GitHub 上现有的样板代码进行了一些研究之后，我决定使用react-boilerplate来开始我的 React 应用程序。我计划在我的网站上添加 Material 样式，并且由于react-mdl现在已弃用，我计划在我的项目中使用material-components-web依赖项。

这是我的第一个 React 应用程序，我想知道一种干净的方法来删除默认样式并在我的项目中添加对 material-components-web 的依赖关系。

非常感谢任何帮助。谢谢。