Tag: reactjs

Blaze LoginButtons模板在React中呈现 – login只能在主页上运行: 所以我使用Meteor / React，但为了方便，我使用了Blaze的login模板。它在主页上效果很好，但是当我尝试从网站上的任何其他页面login时，页面重新加载并且login看起来不成功。这是我的实现。 AccountsUI.jsx import React, {Component} from 'react'; import ReactDOM from 'react-dom'; export class AccountsUI extends React.Component { componentDidMount(){ this.view = Blaze.render(Template.loginButtons, this.refs.loginContainer); } componentWillUnmount(){ Blaze.remove(this.view); } render(){ return( ) } } mainLayout.jsx <div className="container-fluid"> <a className="navbar-btn pull-left panel-body">FAQ</a> <a className="navbar-btn pull-right panel-body">Category</a> <a className="navbar-btn pull-right panel-body">Notifications</a> <a className="navbar-btn […]

如果用户未经过validation，则显示公共逻辑React JS和Node API: 如果用户没有login，我怎样才能显示公共（即：家庭，关于，身份validation的东西）？我知道SPA并不意味着刷新，但我希望它改变页面上的大部分脚本。环境：在单独的项目中使用ReactJS，WebPack和现有的NodeJS API。我浏览了Webpack文档，了解它只会加载所需的脚本和组件，但所有脚本都可以通过“查看页面源代码”来查看。如果我理解错了，请纠正我。

在执行react-relay时，无法读取属性'undefined': 在我的nodejs应用程序中这是我的schema.js文件 import { GraphQLBoolean, GraphQLID, GraphQLInt, GraphQLList, GraphQLNonNull, GraphQLObjectType, GraphQLSchema, GraphQLString, } from 'graphql'; import { connectionArgs, connectionDefinitions, connectionFromArray, connectionFromPromisedArray, cursorForObjectInConnection, fromGlobalId, globalIdField, mutationWithClientMutationId, nodeDefinitions, toGlobalId, } from 'graphql-relay'; import { User, getUser, getPosts, createpost, } from '../data/database.js'; var { nodeInterface, nodeField } = nodeDefinitions( (globalId) => { var { type, id } = […]

反应酶types错误：无法读取未定义的属性'propTypes': 以下是我的React组件： import React from 'react' var PageLeftLower = React.createClass({ render:function(){ return(<a href="#">Quote Requests</a>); } }); module.exports = PageLeftLower; 所以，非常简单的React组件。我刚开始使用Enzyme和Mocha进行testing，并编写了以下代码。 import expect from 'expect'; import React from 'react'; import {shallow} from 'enzyme'; import {PageLeftLower} from './PageLeftLower'; describe('Component : WholeTab',() => { it('renders without exploding', () => { expect(shallow(<PageLeftLower/>).length).toEqual(1); }); }); 当我执行它时，它输出以下警告：组件：WholeTab警告：React.createElement：types不应该为null，undefined，boolean或number。它应该是一个string（对于DOM元素）或ReactClass（对于复合组件）。并出现以下错误： TypeError：无法读取未定义的属性“propTypes”。 […]

Docker + Nodejs + Brunch + ReactJS图像: 我试图设置我的开发环境，只是在笔记本电脑上安装Docker。我要创build的第一个容器是Node.js + Brunch.io + ReactJS。在我的Ubuntu 16.04主机上，我创build了一个目录 mkdir /home/username/Development/projectname/ 在项目名称文件夹里面，我已经通过运行克隆了早午餐/反应骨架回购 git clone https://github.com/brunch/with-react.git www 在www目录里面创build了一个Dockerfile FROM node:6.3.1 RUN apt-get update && apt-get install –yes npm WORKDIR /opt COPY package.json /opt RUN npm install COPY . /opt RUN npm install -g brunch/brunch RUN brunch build EXPOSE 3333 CMD ["npm", "start"] build立图像启动 docker build . -t […]

与摩卡手表一起使用时，Sinon存根有奇怪的performance: 所以这里是我们的基本设置 src/MyComponent.js import actions from `src/actions` export const mapDispatchToProps = dispatch => { return { onClick: () => { dispatch(actions.myAction()) } } } src/actions.js const actions = { myAction: () => () => … } export default actions src/MyComponentTest.js import sinon from 'sinon' import actions from 'src/actions' import { mapDispatchToProps } from 'src/MyComponent' describe('onClickTests, () […]

从Webpack DLL构build中排除模块: 我有一个Webpack构build一个通用的JavaScript应用程序。我正在使用DLL插件预先构build我的所有node_modules。我添加了一个导致DLL生成错误的库（见下文）。我可以添加一个JSON加载器来解决这个问题。但是我根本不需要React代码中的lib。我将它添加到了我的排除列表中，但仍然出现错误。这是错误： Building the Webpack DLL… Hash: a69a927bfa72ddef88d5 Version: webpack 2.1.0-beta.15 Time: 7152ms Asset Size Chunks Chunk Names reactBoilerplateDeps.dll.js 5.58 MB 0 [emitted] reactBoilerplateDeps chunk {0} reactBoilerplateDeps.dll.js (reactBoilerplateDeps) 5.07 MB [rendered] [1135] dll reactBoilerplateDeps 12 bytes {0} [built] + 1137 hidden modules ERROR in ./~/constants-browserify/constants.json Module parse failed: /Users/steve/Projects/elucidate/node_modules/constants-browserify/constants.json Unexpected […]

推迟与巴贝尔import: 我正在一个基于ReactJS的大型网站上工作，需要编写一些testing，我可以推迟加载各种模块，因为我需要先build立Sinon。基本设置看起来像这样 const assert = require('chai').assert; const sinon = require('sinon'); const reducerUtils = require('../../app/utils/reducerUtils'); const connectToReducerStub = sinon.stub( reducerUtils, 'connectToReducer', (stateMap, actionMap) => { console.log(`Connecting to reducer`); } ); 在这一点上，我只需要导入一个组件，试图使用reducerUtils.connectToReducer我已经reducerUtils.connectToReducer ，但我的问题是，如果我喜欢在其他地方的代码库： import MyComponent from '../../app/components/myComponent.jsx'; 导入是作为第一件事（在所有其他事情之前）运行，使得导入和调用reducerUtils.connectToReducer发生之前，我把它存根。另一方面，试图通过使用require来推迟它似乎不起作用： const MyComponent = require('../../app/components/myComponent.jsx'); 这里发生的是MyComponent只是undefined 。我正在使用ES6类来定义我的组件： import react from 'react'; import connectToReducer from '../../utils/reducerUtils'; class MyComponent { […]

如何使用axios将图像（大文件）上传到服务器: 我是这个社区的新手。实际上，我正在做一个使用React的小型项目，而我的服务器使用mongodb数据库运行express和node js。对于较小的文件，我可以正常的与服务器通信。但是当我上传一个更大的文件时，我无法发送数据到服务器。一个空的对象被发送到服务器。而客户端其显示的错误 “No'Access-Control-Allow-Origin'标题出现在被请求的资源上，因此Origin'http：// localhost：8000 '是不允许访问的，响应的HTTP状态码是413。我已经在互联网上search了几个小时的解决scheme，但我还没有得到任何解决scheme。任何人都可以帮我从这个…？

Webpackparsing扩展名“Module not found”: 警告：我对webpack很新，请温和好吧，我正在尝试设置webpack，并且我使用es2015正常工作，并使用webpack导入。我遇到了一个问题，现在我试图添加扩展来resolve所以我不必声明文件扩展名，但它总是说，它无法find文件或模块。任何想法，为什么这可能是？这是我的index.jsx和我的webpack.config.js // index.jsx import * as React from 'react' import * as ReactDOM from 'react-dom' import { Provider } from 'react-redux' import App from './components/App' import configureStore from './store/configureStore.js' const store = configureStore() ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('app') ) 这里是webpack.config ： // webpack.config var path = require('path') var webpack […]