Tag: reactjs

react.js渲染响应客户端组件: 我使用node.js与react.js作为我的模板库。我能够通过使用节点的res.render（..）在服务器端渲染我的组件，但是我想通过使用react.js渲染它们在客户端并调用onclick处理程序来使组件dynamic化。我有我的组件以.jsx格式定义。我怎样才能与客户端的浏览器交互，并dynamic地呈现我的反应组件？

GoogleMap JSX组件中未定义的variables: 在我的应用程序中，从我的Google Map JSX组件（由其他人编写）开始，我有以下代码片段： import React from 'react'; import { Button } from 'react-bootstrap'; import {GoogleMapLoader, GoogleMap, Marker, InfoWindow, DirectionsRenderer} from 'react-google-maps'; import { default as canUseDOM, } from "can-use-dom"; const DirectionsService = new google.maps.DirectionsService(); 当我利用客户端渲染并在客户端上执行此代码时，它运行没有预期的行为错误。但是，当我切换到使用ReactDOM.renderToString（）服务器端呈现，我遇到以下错误： var DirectionsService = new google.maps.DirectionsService(); ^ ReferenceError: google is not defined 仔细查看代码。 variables“谷歌”是真的没有在我的代码之前任何地方定义。我的问题是： variables“google”在哪里定义？为什么客户端渲染执行OK，而服务器端抛出错误？非常感谢你的解释。

服务器端未定义的renderProps / React / React-Router + Node / Express.js的同构渲染: 我试图得到服务器端/同构渲染工作的反应应用程序与反应路由器一致。我的route.js ： import React from 'react'; import { Route } from 'react-router'; import Test from './components/test'; export default ( <Route path="/test" component={ Test }> </Route> ); 我的server.js ： 'use strict'; require('babel-core/register') var path = require('path'); var express = require('express'); var logger = require('morgan'); var compression = require('compression'); var http = require('http'); var ReactDOM = […]

组件文件夹中的index.js的好处: 我看到一个倾向，有一个index文件在反应或angular2项目的组件/容器/模块文件夹，例如 angular2-的WebPack起动反应-样板这有什么好处？什么时候使用？为什么简单地将文件命名为它所包含的组件不够？

currentUser显示为undefined: 当我注册时，我被redirect到具有Navbar组件的/仪表板页面。它与ReactMeteorDataWrap.jsx中定义的ReactMeteorData链接。注册后，我在控制台上得到Object {_id：“qW8wQcc2sjiM8TXcc”，profile：Object，emails：Array [1]} data Object {currentUser：Object}。但是currentUser显示为空。我的代码 ReactMeteorDataWrap.jsx const ReactMeteorDataWrap = (BaseComponent)=>{ return class ExportClass extends Component { getMeteorData(){ let data = {}; console.log(Meteor.user()); data.currentUser = Meteor.user(); console.log('data',data); return data; } render(){ return <BaseComponent getMeteor={()=>this.getMeteorData()} {…this.props}></BaseComponent> } } } export default ReactMeteorDataWrap; Navbar.jsx（/仪表盘） import ReactMeteorDataWrap from '../ReactMeteorDataWrap.jsx'; class Navbar extends Component { […]

带NPM模块的API调用'got': 我已经在ReactJS中设置了一个组件来调用GhostJS的API来显示post，但是我收到错误消息： HomePage.js:30 Uncaught (in promise) TypeError: Cannot read property 'body' of undefined(…) 以下是示例组件。我是否应该在我自己的网站中直接引用Ghost的API或API？他们的API的Ghost文档没有很好的解释这个部分。除了调用他们的API，我已经尝试调用我的网站API通过replace根URL到这个输出： got(`http://localhost:2368/posts/${postId}`)… 这里有什么不对吗？

如何从项目或目录自动导入.scss文件: 我正在使用Reactjs应用程序。我正在使用Webpack。我的目标是能够创build一个组件，并创build一个.scss文件，该组件的样式在同一个目录中。例如： |- components/ | |– component1.js | |– component1.scss (automatically import files like this one!) | |- main.scss (gets loaded by webpack by default) 为了能够在每次创build新文件时自动导入.scss文件而不需要在main.scss文件中执行@import，我需要做些什么。我可以接受导入给定目录内的所有文件。如果我创build一个新的.scss，它应该自动添加到生成的样式。我不关心import的顺序。这是可能吗？

Webpack：找不到模块：错误：无法parsing模块browser.js: 我正在尝试webpack与反应。我正在尝试使用babel-loader来传输jsx文件。我使用任何webpack加载器/插件时收到模块找不到错误。我在node_modules中安装了所需的插件。这个问题似乎与path决议。不知何故，它解决依赖插件时，我的当前目录prepends绝对path。这是我的webpack.config.js的片段 module: { loaders: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', // 'babel-loader' is also a legal name to reference query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] } }] } 当我运行webpack （全局以及通过npm）时，它会给出以下错误： ERROR in ../~/react/lib/ReactDOMNullInputValuePropDevtool.js Module not found: Error: Cannot resolve module '\\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js' in H:\codebase\react-demo\node_modules\react\lib resolve […]

ReferenceError：localStorage没有在ReactJS Build中定义: 我在我的应用程序中使用localStorage对我的身份validation组件进行了很多操作，以从本地存储获取用户详细信息，并将其存储在login名中。当我build立我的应用程序，它会引发ReferenceError: localStorage is not defined 。我知道这可能是因为节点没有访问localStorage，从而出现错误。我该如何解决这个问题？这里是我在组件中使用的代码示例。 import React, {PropTypes} from 'react'; import AccountBasicInfo from '../components/AccountBasicInfo'; export class Account extends React.Component { userBasicInfo(){ const user = localStorage.getItem('User') ? JSON.parse(localStorage.getItem('User')) :{}; const cashback = localStorage.getItem('cashback') ? JSON.parse(localStorage.getItem('cashback')) :{}; } render(){ return( <div> <AccountBasicInfo theme="theme2" item={this.userBasicInfo.bind(this)()}/> </div> ); } } export default Account;

抽象types节点必须在运行时为字段Root.nodeparsing为Objecttypes，值为“\”，接收到“null”。: 我正在实施具有反应和中继的searchfunction。以下是我的schema.js var { nodeInterface, nodeField } = nodeDefinitions( (globalId) => { var { type, id } = fromGlobalId(globalId); if (type === 'User') { return getUser(id); }else if (type === 'Post') { return getPost(id); }else if (type === 'Setting') { return getSetting(id); } return null; }, (obj) => { if (obj instanceof User) { return […]