Tag: reactjs

反应路由器 – BrowserHistory.Push VS. ContextTypes: 我正在完成一个高级的react / redux教程，并在教程中使用browserHistory.push链接到一个路线，而不是用于创build一个名为contextTypes的静态类variables的前一个方法，并设置它等于类似React.PropTypes.blah等等等等。那和使用browserHistory.push有什么区别？与设置上下文types相反，browserHistory.push似乎更容易作为程序重新路由。谢谢！

Webpack 2代码与服务器端渲染和React-Router-v4分离: 使用webpack2.2.0-rc1并响应routerv4，并使用这个要点使代码分裂工作，这说明以下 function asyncComponent(getComponent) { return class AsyncComponent extends React.Component { static Component = null; state = { Component: AsyncComponent.Component }; componentWillMount() { if (!this.state.Component) { getComponent().then(Component => { AsyncComponent.Component = Component this.setState({ Component }) }) } } render() { const { Component } = this.state if (Component) { return <Component {…this.props} /> } return null […]

react_on_rails安装：yarn是必需的错误: 我正在尝试根据以下说明为现有的rails 5.0应用程序设置react_on_rails： https ： //github.com/shakacode/react_on_rails gem“react_on_rails”，“8.0.0” rails生成react_on_rails：install 我得到以下错误： ERROR: yarn is required. Please install it before continuing. https://yarnpkg.com/en/docs/install 现在这是我的纱线npm和节点path： [user@server]$ which node /usr/bin/node [user@server]$ which npm /usr/bin/npm [user@server]$ which yarn ~/.yarn/bin/yarn 我如何确保使用合适的纱线并帮助安装react_on_rails？编辑：这是我的〜/ .bashrc文件： export PATH="$HOME/.rbenv/bin:$PATH" eval "$(rbenv init -)" export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s […]

Webpack和Nodejs同构需要绝对path: 目标：我正在尝试在nodejs和webpack中设置一个项目，使得require函数可以使用项目目录作为根目录，所以我可以在两个环境中都要求相对于项目根的绝对path （同构使用，即React server + client render ）。状态：在webpack中，你可以设置config.resolve.root来使其工作，但是在nodejs中，最好不要覆盖/修改global.require。 build议1 ：我可以发挥新的全球职能 global.p_require 所以它在节点中工作; 然而，我不能find一种方法让webpackparsing“p_require”到__webpack_require__中，而无需更改webpack源代码。 build议2 ：我可以创造一个新的全球variables global.ROOT_DIR = process.cwd() 所以它在节点工作 require(ROOT_DIR + <relative path to root>); 然而，webpack会认识到这是dynamic的要求。有没有办法让webpackparsingROOT_DIR？我已经尝试了定义插件，但似乎加载后的需求被webpackparsing。题任何人有解决scheme或面临同样的问题？

React-Router Router.HistoryLocation刷新页面: 我正在使用React-Express-Node应用程序并专注于SPA。我正在使用react-router。我的server.js文件看起来像这样（只有路由部分）： app.use(function(req, res, next) { Router.run(routes,function(Handler, state) { var ele = React.createElement(Handler); res.render(path.join(__dirname + '/public/index'), {html: html}); }); next(); }); 路线文件有这个代码（粘贴主要部分）： module.exports = ( <Route name="app" path="/" handler={Main}> <Route name="about" path="about" handler={About}/> <Route name="about/id" path="about/:id" handler={About}/> <DefaultRoute name="default" handler={Home} /> </Route> ); 和client.js看起来像这样： Router.run(routes, function(Root,state){ React.render(<Root />,document.getElementById('app')); }); 这个设置工作正常没有任何问题。现在，我想使用历史API推送状态，以便我可以有更好的url和摆脱＃。为了做到这一点，我添加了Router.HistoryLocation作为client.js中的第二个参数，它工作，它删除＃和干净的url。但是，我的页面刷新，我不想要的。我已经search了这一切，并find了一些解决scheme，但他们要么使用Flux或自定义路由器。 […]

反应服务器不启动 – 与renderProps的东西: 我有一个React应用程序，这里是我的服务器代码： app.get('*', (req, res) => { let history = createMemoryHistory(); let store = configureStore(); let routes = createRoutes(history); match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { if (redirectLocation) { res.redirect(301, redirectLocation.pathname + redirectLocation.search); } else if (error) { res.status(500).send(error.message); } else if (renderProps == null) { res.status(404).send('Not found'); } else { let { […]

显示Meteor React Client中的所有用户: 我有一些麻烦让所有注册用户显示在客户端。 std:accounts-ui包包含在.meteor/packages 。 autopublish包已被删除。所有用户的数据都作为allUsers在Users.js中allUsers ，而客户端从react-meteor-data提供的createContainer订阅allUsers发布。但是，页面只呈现当前login的用户的详细信息Meteor.users().find().fetch()在浏览器中运行Meteor.users().find().fetch()只显示当前login的用户，如果用户是未login。在服务器端运行console.log(Meteor.users.find().fetch()正确输出所有用户。为什么在浏览器上发生这种情况？ /imports/api/Users.js import { Meteor } from 'meteor/meteor'; if (Meteor.isServer) { Meteor.publish('allUsers', function() { return Meteor.users.find({}); }) } /imports/ui/App.jsx import React, { Component, PropTypes } from 'react'; import { createContainer } from 'meteor/react-meteor-data'; import { Accounts } from 'meteor/std:accounts-ui'; import { Table } from 'react-bootstrap'; import User […]

如何避免客户端在rea-apollo SSR中重新获取？: 我是新的graphql与react-appollo我想用reax apollo与redux也服务器端呈现每一件事情都很好我的应用程序正在工作，但问题是当我的应用程序渲染它实际上是再次调用API它不使用我呈现状态服务器.js import express from 'express'; import bodyParser from 'body-parser'; import path from 'path'; import expressGraphQL from 'express-graphql'; import schema from './GraphQL/Schema'; import React from 'react'; import ReactDOMServer from 'react-dom/server' import { StaticRouter } from 'react-router'; import { ApolloClient, createNetworkInterface, ApolloProvider } from 'react-apollo'; import { getDataFromTree } from "react-apollo" import store from '../client/Redux/Store/store'; […]

如何使用.net MVC的Flux和事件发射器？: 我正在学习Flux模式。我学会了使用.net MVC的React并将其呈现在服务器端。我想学习Flux，但所有教程都使用节点js。我不使用节点。我不知道如何实现Event Emitter部分，因为它使用了一个节点函数。 https://www.codementor.io/reactjs/tutorial/react-js-flux-architecture-tutorial 大约三分之一的下降： “事件发射器 – 事件发射器负责在存储完成任何数据动作之后通知订阅者，反之，它也需要能够注册观察者以用于特定的事件，我们将在待办事项应用程序中使用Node的事件发射器“。考虑到Flux只是一个模式，是否有什么我可以使用.NET MVC，在没有节点，处理事件发射器的一部分？感谢赞赏，谢谢。

React.js与Node.js Rest API: 是否应该将我的Reactjs应用程序包含在与我的REST API相同的应用程序中？我是Reactjs的新手。我已经构build了一些独立的Node REST API。我正在构build一个React应用程序，一个Android应用程序和一个iOS应用程序（所以REST API需要为所有这三个应用程序提供服务）。我想知道在构buildNode API时会遵循什么约定。有2个选项，我看到它… 1）我可以构build一个包含REST API和React App的大型应用程序。这个应用程序将服务于移动应用程序的所有API调用和反应/ Web应用程序。它也将服务于所有的意见，即HTML，CSS等。要么 2）我可以build立两个更小的应用程序。人们可以使用独立的（更轻的）节点服务器为视图模板提供React应用程序。第二个应用程序不会持有任何意见。它只是作为一个JSON API来服务所有三个应用程序。