问题标签 [fluxible]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
378 浏览

javascript - Fluxible 和 Navlink 路由错误

我实际上正在使用fluxible开发一个应用程序,并且我在使用路由参数时遇到了问题。

实际上,我有这个渲染功能:

我的 ./conf/routes.js 中的这条路线:

ProjectDetail: { path: '/project/:id/details', method: 'get', page: 'ProjectDetail', title: 'Project detail', handler: require('../components/ProjectDetail'), notInMenu:真的 }

这是我得到的错误:

仅当我尝试在 routes.js 中使用参数化路由时才会发生这种情况。

我不知道要让它与众不同:-/

0 投票
4 回答
4509 浏览

javascript - 冲突的服务器/客户端渲染和 Webpack 的本地 css 模块

我正在使用 Fluxible 帮助在一个新项目上创建一个同构应用程序,并且它运行良好。到目前为止我喜欢它。不过,我遇到了减速带,想知道如何克服它。

到目前为止,这是我的 Header 组件:

你会看到我process.env.BROWSER用来检测我在哪个 ENV 上。如果我们在客户端,我需要 CSS。如果我们在服务器上,我会跳过它。这非常有效。

问题出现在文件的后面,我theClasses根据Header.css文件的内容构建对象,然后在 Header 上使用这些类,如下所示:

问题是因为我没有在服务器上加载 css,theClasses最终为空,并且为客户端呈现的内容最终与服务器上的内容不同。React 显示此警告:

警告:React 尝试在容器中重用标记,但校验和无效。这通常意味着您正在使用服务器渲染,并且在服务器上生成的标记不是客户端所期望的。React 注入了新的标记来补偿哪些工作,但是您已经失去了服务器渲染的许多好处。相反,找出为什么生成的标记在客户端或服务器上是不同的:

(client) n28"><header class="Header--Header_ip_OK

(server) n28"><header class="" data-reactid=".2ei

你会建议什么来解决这个问题?


2015 年 9 月 24 日更新

最初的问题是我无法在服务器端编译 CSS,所以我开始像这样检查 BROWSER:

如果我删除该if (process.env.BROWSER)位,我会收到此错误:

在以下简单的 CSS 文件中:

我用Fluxible Yo Generator开始了这个项目,它在这里提供了两个 Webpack 配置文件:https ://github.com/yahoo/generator-fluxible/tree/master/app/templates

我用一些装载机更新了我的:

所以这就是我所在的地方……不知道如何在服务器端编译 CSS。感谢我能得到的任何帮助。

0 投票
0 回答
58 浏览

javascript - 如何在生产环境中运行 Fluxible 模板项目?

webpack 和 Fluxible 的新手,所以我试图了解他们的入门样板: http: //fluxible.io/quick-start.html

在此处输入图像描述

运行npm run dev正常并启动实时重载网络服务器,但我对如何在生产中运行它感到困惑。查看 package.json

我假设我会运行npm run build它似乎在生产配置模式下运行 webpack 并将 js 文件复制到/build文件夹中。此时如果我运行 npm start,它运行start.js的只是指向server.js并且服务器在没有开发热加载的情况下运行。

我的问题是:为什么应用程序在运行我假设处于生产模式时仍继续进行轮询(我假设是套接字或轮询以运行开发热加载器)。我在日志中看到了这一点:

在生产服务器上,我只是部署整个根文件夹还是我应该只部署构建文件夹......如果是这样,构建文件夹会丢失一些东西。

静态资产是否应该复制到构建文件夹中 - 就像 express 中的 /public 文件夹?

开始.js

服务器.js

0 投票
0 回答
822 浏览

webpack - 如何在 Fluxible 模板项目中提供静态图像/css/assets?

我也想将静态资产复制到构建文件夹中,例如图像、css 和资产。

我注意到在他们的示例项目中,server.js 将构建文件夹映射到 /public。

server.use('/public', express.static(path.join(__dirname, '/build')))

我是不是该

一个。作为构建过程的一部分,让 webpack 将我的公共文件夹的内容复制到构建文件夹中

湾。或者,在 express 中设置另一个指向我的公用文件夹的静态路由,如果是这样,对构建文件夹的引用可能会令人困惑,因为它也包含公用名称。

C。混合,将 css 处理添加到 webpack 步骤,并将处理后的 css 文件也放入 build 文件夹,但在单独的 /assets express.static 路由中提供静态资产(如未处理的图像)。

我是 webpack 的新手,所以不确定如何设置 a 或 c,因此将不胜感激。

webpack.config.js

0 投票
2 回答
170 浏览

reactjs - “setState on undefined”这个错误试图在雅虎fluxible中使用es6风格的反应组件

编辑:我的错误,我的 webpack hotloader 每次运行构建时都会出于某种原因缓存旧的 js。重置并重建,它现在似乎正在工作。

我正在尝试在 yahoo Fluxible React 应用程序中使用 es6 样式类声明创建一个简单的搜索框。我正在处理 todo 示例,将其转换为 es6 样式语法,但我this.setState_onChange方法中遇到错误。我已在构造函数中将函数绑定到“this”,但仍然出现错误。

0 投票
2 回答
192 浏览

reactjs - 尝试在 es6 类中声明我的 Fluxible react.js 组件时出错

我在尝试使用 es6 类声明创建可流动组件时遇到此错误:

我将在fluxible docs上离开这个例子:

http://fluxible.io/api/components.html

我是否正确声明了我的可熔组件?它在没有初始状态的情况下出错,因此看起来它没有被调用。

0 投票
1 回答
404 浏览

reactjs - 如何使用 connectToStores 更新 Fluxible react.js 组件中的状态与道具

所以我不确定我是否完全理解 connectToStores 在我的搜索结果组件中所做的事情。我希望在我的商店发出更改时更新组件的状态,但是它似乎只是在更新组件的属性并更新包装SearchResultsConnector对象的状态。

我的问题是:

  1. 在这种情况下我不应该使用状态吗,如果是这样,为什么 connectToStores 有一个返回状态的回调?

  2. 何时从 store 中的 emitChanges 触发器更新状态?我是否必须复制我在构造函数中所做的事情?

  3. 我什么时候应该使用 state vs props,并且应该存储更新状态?是否有特定的通量规则以单向方式改变状态?

  4. 当我在开发服务器中热加载更改时,为什么状态会更新到结果。我不明白这是否是正确的行为。

  5. 我是否应该在此处捕获更新事件并以某种方式使用传入的更改属性更新状态?

搜索结果.js

0 投票
1 回答
1056 浏览

webpack - 如何在 webpack 配置中启用阶段 0 以在可流动组件中启用 decoratorPattern

我尝试按照在fluxible connectToStores 示例中使用装饰器模式的说明进行操作

http://fluxible.io/addons/connectToStores.html

但是,我在 @ 符号上遇到语法错误。我是否必须先配置或加载某些内容才能在我的 Fluxible 应用程序中识别装饰器模式?

我已经尝试使用以下 webpack.config.js 来启用对可变模板的阶段 0 支持,但我收到一条错误消息,说当有多个加载器时我无法声明查询

webpack.config.js

0 投票
1 回答
629 浏览

fluxible - 如何使用fluxible-router处理动态路由参数

如何使用fluxible-router访问动态navParams

例如,如果我有一个用户组件,并且我想根据路由设置组件的 userId 属性

https://github.com/yahoo/fluxible-router/blob/master/docs/quick-start.md

如何在 User.jsx 组件中访问该 userId?

0 投票
1 回答
73 浏览

javascript - Windows 上的 Yahoo Fluxible“未定义外壳”

Fluxible 生成的应用程序的webpack-dev-server.js中的以下行给出错误“未定义外壳”

我做了

更改后,服务器启动时没有错误,但更改后自动重新启动仍然不起作用。我究竟做错了什么?