Tag: reactjs

反应路由器打印在客户端反应空

我使用服务器端渲染的性能，但我的客户端不同的服务器端，因为我的客户端渲染首先<!– react-empty: 1 –>而不是组件，然后在客户端检测到校验和不同，它重新呈现应用程序，所以我失去了性能。 在这里，我问问题在哪里描述我的问题，并经过一些debugging后，我发现我的Router元素在我的根组件导致问题 render() { let history = browserHistory; if (this.props.store) { history = syncHistoryWithStore(browserHistory, props.store) } return ( <Provider store={store}> <Router history={history} routes={routes} /> </Provider> ); } 当我改变Router为简单的div元素它呈现div，但与路由器它不首先渲染我的元素，这将导致校验和不匹配和客户端重新呈现。 这是我的路线。 自从我使用延迟加载后，我已经写了这种方法。 export default { component: App, path: '/', indexRoute: { onEnter: (nextState, replace) => { replace('/sneakpeak') } }, childRoutes: [ { path: '/', […]

如何将JSON数据从Node.js res.render方法传递给客户机上的react.js

我使用node.js接受请求，从dynamodb获取数据，格式化/合并到一个现有的JSON模板对象并返回它。 当使用节点作为web服务，只是返回json，但是我正在testing在react.js中编写新的客户端代码。 我知道我可以做两个往返 – 首先加载没有JSON的页面，然后AJAX在react.js加载JSON，但我想在一个。 在节点中，我填充“filledTemplate”，我想返回JSON对象filledTemplate（通过Jade模板“窗体”），以便在客户端访问。 我可以把这个东西传给玉，但是我不确定那之后的下一步。 lib.pact.mergeDataIntoTemplate(formTemplateJSON,backgroundDatasetJSON, function(err, filledTemplate){ if(err) { console.log(err); } else{ res.render('forms', { title: 'Filled Forms', data: filledTemplate }); } }); 长话短说，我不知道如何在客户端传递/访问react.js（或者vanilla js）中的对象。 任何提示或指针将不胜感激。 （另外，显然没有react.js的标签，我不能添加它…如果别人想要）

nw reactjs requring在多个文件不起作用

问题- var React= require('react') var SomeComponent= require('./utils/SomeComponent') var Wrapper= React.createClass({ render: function(){ return <SomeComponent/> } }) //utils/SomeComponent.js: var React= require('react') module.exports= React.createClass({ //.. }) throws- Error: Invariant Violation: Wrapper.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. Error: Invariant Violation: Wrapper.render(): A valid ReactComponent must […]

反应回stream – 发电机使用Yeoman

我正在尝试使用yeoman生成器生成反应回stream项目，但是我收到以下错误。 我为此使用yeoman发生器，并通过npm安装了发生器 – 反应回stream。 pdc1-4s6zyr1:expProj administrator$ yo ? 'Allo administrator! What would you like to do? (Use arrow keys) Run a generator ❯ Angular Webapp React Reflux Karma Yeogurt Mocha (Move up and down to reveal more choices)/usr/local/lib/node_modules/yo/node_modules/configstore/index.js:86 ? 'Allo administrator! What would you like to do? React Reflux Make sure you are in the […]

react-typeahead – 不变的违规：addComponentAsRefTo（…）问题

节点v0.12.2 React v0.13.2 Npm v2.7.4 使用标准typeaheadinput会导致以下错误： 未捕获错误：不变违例：addComponentAsRefTo（…）：只有ReactOwner可以有参考。 这通常意味着你正在尝试向没有所有者的组件添加ref（也就是说，不是在另一个组件的render方法中创build的）。 试着将这个组件放在一个新的顶层组件中，这个组件将会容纳参考。 这就是我如何实现这一点… Index.jsx有： 'use strict' var React = require('react'); var ReactTypeahead = require('react-typeahead').Typeahead var QuickSearch = React.createClass({ render: function () { return( <ReactTypeahead options={["spam", "foodbar"]}/> ); } }); var Topbar = React.createClass({ render: function() { return ( <QuickSearch /> ); } }); module.exports = Topbar; 然后在我的App.jsx中我有： 'use […]

如何使用npm封装javascript里面的反应组件

我正在尝试使用rc-calender进行反应。 https://www.npmjs.com/package/rc-calendar 我需要使用这个包的CSS。 我正在尝试使用这个如下。 require('rc-calendar/assets/bootstrap.css'); 但它是给我的 ParseError ：意外的令牌。 我得到所有其他的CSS（从其他npm包）类似的错误。 任何想法如何使用这些CSS。

同构的应用程序没有拆分视图

在过去的几年中，我一直在MEAN栈上构build单页应用程序，并且非常喜欢它。 但是，默认情况下缺乏SEO，有时候一些性能问题对我来说是一个真正的问题。 所以我开始研究构build同构的应用程序。 我检查了这些教程： http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ http://engineering.devmag.io/post/1/creating-an-isomorphic-blogging-app-using-react-and-flux 用我目前的SPA构build，我有一个主index.html文件（包含body＆head，header，footer，nav和脚本来加载），然后我有一个使用Angular的ng-view加载ng-view 。 这是非常容易维护前端的HTML作为一个页面的所有代码将在一个单一的视图文件。 然而，我看过的同构构build（使用React和Flux）的教程将html分割成模块，每个模块都有自己的文件并混合到javascript中。 我觉得这很难看，很难维护。 查看输出文件中的代码，很难看到结果页面的样子。 它看起来不是很有语义，似乎回到了一些老式的在PHP应用程序中构build模块化html的方法，而这些方法有些人曾经做过。 有没有办法维护我们从Angular SPA中获得的简单的路由和html视图结构，同时能够以同构的方式在服务器上呈现？ 注意我不是简单地使用PhantomJS之类的东西来渲染服务器上的内容。 我仍然想要完整的同构体验，首先打到页面提供完全呈现的内容，然后后续交互在客户端执行JavaScript。

优点和缺点只使用快递+反应，而不是expression+反应+玉/ ejs

使用反应作为引擎https://github.com/reactjs/express-react-views vs 调用renderToString，然后用其他引擎重新启动https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/ 可能是其他像res.send + renderToString

momentjs – fromNow（）方法在通用（同构）的js应用程序中

我有一个应用程序是用node.js和react.js构build的，并且是通用的（或者是之前调用的“同构”），并且使用REST API来获取数据。 在某些组件的render方法中，我以2 days ago或few seconds ago格式显示date，在这种情况下，moment.js完美地工作。 我正在谈论它的方法fromNow() ，例如： render() { const { date } = this.props; const formattedDate = moment(date).fromNow(); return ( <div>{formattedDate}</div> ); } 但是这是问题： Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on […]

与JSPM重用同构/通用React组件

我正在尝试使用ExpressJs / ReactJs / JSPM堆栈来configuration同构/通用设置。 我目前的问题是，JSPM要求我将JSX模块添加到.jsx！ 后缀为了传输它们，所以我的组件依赖期望文件名是从服务器模板到浏览器组件的区别。 有没有人遇到过这个问题并解决了它？