Articles of reactjs

如何模块化JavaScript类(将方法拉出主文件,将方法导入主文件)

是否有可能从JS中的类拉类方法? 原谅我,我是function范式,所以使用React迫使我使用类和this关键字(到目前为止)。 我的一些组件越来越大,我不想要这个。 我无法在Google上find任何有关拉出方法或模块化课程的内容。 有没有一种方法,我可以说“ 从./some_method.js'获取此方法,并使用它,如果它是在这个文件&类中声明 ”没有太多的侵入性的变化? 如果做不到这一点,我假设他们把所有的function都传递给他们。 但是,这感觉很肮脏。 我会感谢一些指导我需要看什么关键字,或者只是如何移动方法,所以我没有2000行文件,需要我20分钟find toggleFullMenu() { this.setState({ menuOpen: !this.state.menuOpen}) } 不用按CTRL + F。 这是我的动力。 我也想知道是否有关于这个与build设者有关的专业技巧。 任何类inheritance范式的警告? 我只是想让方法独立地坐在不同的文件中,但我不知道我在找什么。 我从来没有见过人们在谈论这个。 编辑,我刚刚在MDN中发现: 子类与扩展 extends关键字用于类声明或类expression式中,以创build另一个类的子类。 来源: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } 这是我需要的吗? 我将如何去拉动一堆扩展? 我不想要一个小孩课,听起来不像我所描述的那样。

asn1中意外的令牌(len)

我发布这主要是为了别人的好处,因为花了几个小时的研究来深入研究这个问题,我不认为它是与我们的应用程序隔离的。 我最近重新安装了所有npm包在我们的babelified应用程序,并开始在构build过程中出现错误,如“意外的令牌(len)”。 经过相当多的挖掘,我开始findconst,让一个名为asn1.js的包。

通过webpack为不同的环境加载url常量

我有webpack.config.js文件: 'use strict'; var webpack = require('webpack') var env = process.env.NODE_ENV var API_URL_1 = { production: JSON.stringify('http://xyz:8000/api/v1/var'), development: JSON.stringify('http://192.168.99.102/api/v1/var') }; var API_URL_2 = { production: JSON.stringify('http://xyz:8000/api/v1/ui'), development: JSON.stringify('http://192.168.99.102/api/v1/ui"') }; var API_URL_3 = { production: JSON.stringify('http://xyz:8000/api/v1/data'), development: JSON.stringify('http://192.168.99.102/api/v1/data') }; var API_URL_4 = { production: JSON.stringify('http://xyz:8000/api/v1/calculated'), development: JSON.stringify('http://192.168.99.102/api/v1/calculated') }; var config = { module: { loaders: [ […]

无法从服务器获取对象数组

我正在写一个简单的网站,显示从服务器的对象列表 服务器:index.js var db = [{ username: 'admin', password: '1234', email: 'admin@gmail.com'}]; app.get('/getListAccount', (req, res)=>{ res.send(db); }) 显示:list.js import React from 'react'; import {connect} from 'react-redux'; import axios from 'axios'; class Transaction extends React.Component{ render(){ var {listUser} = this.props; var xhtml = listUser != null ? <p>{listUser.map((e, i)=><p key={i}>{e.username}</p>)}</p>: <p>No user</p>; return ( <div> <h1>Transaction</h1> […]

在NodeJS服务器(我正在使用react-router)的同构react-redux应用程序中设置存储的初始状态,

我正在尝试从NodeJS服务器设置我的redux商店的初始状态。 我不确定我错过了什么,以及如何使其工作。 这是我的server.js const express = require('express'); const path = require('path'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const webpackHotServerMiddleware = require('webpack-hot-server-middleware'); const config = require('./webpack/webpack.development.config.js'); const compiler = webpack(config); const app = express(); app.use(webpackHotMiddleware(compiler.compilers.find( compiler => compiler.name === 'client' ))); app.use(webpackHotServerMiddleware(compiler)); app.listen(3000); 这是我的webpack.development.config const path = require('path'); module.exports = […]

如何将asynchronous状态提取发送到组件?

我目前正在一个小应用程序的乐趣。 我遇到了使用axios的问题,并将响应作为更新状态返回给我的App组件。 然后,我尝试允许另一个组件使用该状态,但我无法实际访问数据。 我可以从列表组件内console.log(道具),但我不知道如何输出实际的数据,因为我只能够输出承诺的结果。 我想能够输出props.currentUser,并有它的googleId(使用谷歌Oauth2.0)..我相信解决scheme很简单,但是,这是我的代码: App.js – > import React from 'react'; import helpers from '../helpers'; import List from './List'; class App extends React.Component{ state = { currentUser: null } componentDidMount() { this.setState(prevState => ({ currentUser: helpers.fetchUser() })); } render() { return ( <div> <List currentUser={this.state.currentUser}/> </div> ); } }; export default App; helpers.js – […]

我的反应应用服务器在哪里?

我使用React教程页面上的教程设置了一个反应应用程序。 运行我input的应用程序 npm开始 Package.json提到启动应该运行“react-scripts start” 。 我试图了解在这个应用程序上生活的服务器在哪里? 我想在此添加路由,以便我可以实现一些后端function,使AJAX调用“/电子邮件”或类似的path。 我是React的新手,但我假设应该有一些在端口上监听的Express路由,如果没有的话,有人可以帮我理解这个架构吗?

制作React图库的策略对search引擎友好

我写了一个React图片库或幻灯片。 我需要使search引擎可以索引替代文本,但因为我的服务器是在PHP中,React.renderToString是有限的使用。 该服务器在PHP + MySQL中。 PHP使用Smarty(一个体面的PHP模板引擎)来呈现HTML。 其余的PHP框架是我自己的。 Smarty模板有这么一个单一的线: <script> var GalleryData = {$gallery}; </script> 这是由PHP的控制器function呈现如下: return array( 'gallery' => json_encode($gallery), ); ( $gallery是MySQL查询的结果表)。 而我的.js: React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0)); 不是最优雅的设置,但考虑到我的服务器是在PHP中,似乎没有更好的方法来做到这一点(?) 我做了一个超级快速入门,在第一枪时修复了这个问题 – 我从Firebug复制了呈现的HTML,并手动将其插入到数据库中的一个新表中。 然后,我只是从PHP中呈现这个代码块,我们很高兴浏览器。 有一个复杂的是,因为React组件只在第一次渲染时插入到DOM中(据我了解),而且由于该库一次只显示一个图像幻灯片,我不得不手动点击所有幻灯片一次保存HTML代码。 但是现在,替代文本可以由CMS编辑,所以我需要自动化这个过程,或者想出一个更好的解决scheme。 在Node.js中重写服务器是不可能的。 我的第一个猜测是我需要安装Node,并编写一个脚本来创build相同的React组件。 由于input数据(包括alt文本)必须来自MySQL,我有几个select: 从注释连接到MySQL数据库,并复制查询 在PHP端创build一个只返回JSON的响应URL(把SQL查询放入一个通用函数) 在Node中获取整个页面,但是提取GalleryData将会是一团糟 然后,我必须确保所有组件都被渲染到DOM中,所以我可以通过手动调用nextSlide()方法多次编写幻灯片(less一个)来编写脚本。 最后,我将把渲染的DOM再次保存到数据库(所以Node脚本毕竟需要一个MySQL连接 – 也许第一个选项是最好的)。 对于这样一个基本要求,整个过程似乎非常复杂。 我错过了什么吗? 我对Node完全陌生,在浏览器之外构buildDOM的概念对我来说基本上是新的。 我不介意将Node引入到我的架构中,但它只是支持在前端使用React。 请注意,该网站每月大约有15,000个综合浏览量,因此不需要考虑大规模的可扩展性 – 我不使用任何页面caching,因为这种stream量并不需要。 我可能有一些需要像这样静态渲染的React组件,但是维护一个小的技术开销(例如,在Node中维护一组并行的SQL查询)不会是一个大问题。 有谁可以在这里指导我吗?

我如何处理服务器上的反应路由器可能的每条路线?

在反应路由器中的自述文件之后: var routes = ( <Route name="app" path="/" handler={App}> <Route name="inbox" handler={Inbox}/> <Route name="calendar" handler={Calendar}/> <DefaultRoute handler={Dashboard}/> </Route> ); Router.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); 对节点和一个有信誉的前端js框架是非常新鲜的,请原谅noobish的问题.. 在服务器上处理路由最好如何? 我的意思是,当某人登陆/calendar时会发生什么事情,我是否必须在快速路线中的客户端和服务器上容纳路线,或者是否有快递路线。 IE某人登陆/calendar ,应该表示为/的HTML并允许处理其余的? 谢谢,约翰

使用Superagent服务器端获取连接ECONNREFUSED错误

我正在构build一个同构的React应用程序。 我正在使用Webpack捆绑我的JS。 我正在使用react-router进行路由。 当我点击“/search”路线时,要呈现的组件调用一个API(目前只是一个testingJSON文件)。 在客户端,superagent调用工作正常,并在渲染此路由时拉入数据。 当我尝试从服务器端渲染相同的路由时,出现此错误: Potentially unhandled rejection [2] Error: connect ECONNREFUSED at errnoException (net.js:901:11) at Object.afterConnect [as oncomplete] (net.js:892:19) 任何想法为什么发生这种情况? 这是执行呼叫的代码: var request = require('superagent'); var Promise = require('Promise'); module.exports = { doCall: function(url, params) { return new Promise(function(resolve, reject) { request .get(url) .end(function(err, res) { if(res) { resolve(res); } else { reject(err); […]