小编Kar*_*ran的帖子
使用ReactJS ES6实现Socket.io
我无法将SocketIO客户端整合到我的项目中,因为我让我的项目设置为同构的.在我的基本html中包含套接字文件之后,我尝试调用let socket = io();我的一个组件的componentdidmount,但是最初在我的控制台中记录后它是未定义的.当我路由到另一个组件并使用该套接字变量返回该组件时,它会填充一些数据.我想我的观点是,在我的组件中没有初始化什么套接字,似乎它必须等待我如何解决这个问题？
Component.jsx
componentDidMount() {
let socket = io();
console.log(socket);
}
base.html文件
<!doctype html>
<html lang="">
<head>
<title>TITLE</title>
META
LINK
</head>
<div class="app">CONTENT</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" charset="utf-8" src="/assets/app.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</body>
</html>
这工作正常,因为从服务器连接的东西,它发出用户连接和断开服务器,只是客户端操作让我感到困惑.
推荐指数
解决办法
查看次数
Apache Web服务器不允许我刷新/关于但是在localhost上工作正常
我捆绑了我的一个项目,它工作正常.但是当在路由/关于刷新时,它会显示在此服务器上找不到请求的URL/about.但是,当我在本地主机上从Web服务器上执行此操作时,它在刷新和前进/后退按钮上工作正常.我正在使用react-router进行客户端路由.
继承客户端路由,但我怀疑它的问题
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, app);
});
我的路线就在那里:
let routes = (
<Route>
<Route name = "App" path="/" handler = {App}>
<Route name="About" path="/about" handler = {About}/>
<DefaultRoute name="Projects" handler = {Projects}/>
</Route>
</Route>
);
这是我认为我破坏的APACHE:
<Directory /var/www/>
# This directive allows us to have apache2's default start page
# in /apache2-default/, but still have / go to the right place
Require all granted
#RedirectMatch ^/$ /apache2-default/
</Directory>
kkotwal.me.conf:
<VirtualHost *:80>
# The ServerName directive sets the …推荐指数
解决办法
查看次数
goBack()带我到第一个入口,而不是我想去的地方
我正在创建一个应用程序,我登录/注销有一个家,关于,配置文件等.它使用反应路由器,但是当我登录时,我希望应用程序转换到它所在的最后一条路线,它有时适用于例如,如果我访问,然后登录并登录,它会带我回到约,但如果我访问应用程序根目录'/'然后去登录,并登录,它会带我回到我曾经在的第一页(当您打开浏览器或选项卡时,这将是默认页面).我这样写了,我觉得我这样做的方式非常幼稚.我在渲染方法中做到了,它被称为很多.我认为它有时会这样做,但我不完全确定.希望得到一些建议,代码:
constructor(props, context) {
super(props, context);
this.state = UserStore.getState();
this.context = context;
}
render() {
console.log(this.state.user.get('authenticated'));
if(this.state.user.get('authenticated')){
this.context.history.goBack();
}
return (
//stuff
)
我是否应该在我访问的每条路线上将状态推入历史记录中,我还注意到,如果我在登录之前等待一段时间,有时它会正确执行,也许它会将其添加到历史记录中稍晚或需要一些时间？不完全确定如何调试它,console.log(this.context.history)只是显示了它的一些功能,我想我可能会在错误的地方看？
路线:
export default (
<Route component={App}>
<Route path="/" component={Dashboard} />
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
<Route path="about" component={About} />
<Route path="profile" component={Profile} onEnter={requireAuth}/>
<Route path="login" component={LoginSignupPage} />
<Route path="channels" component={Channels} />
</Route>
);
注入反应路由器
import React from 'react';
import ReactDOM from 'react-dom';
import Iso from 'iso';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router } from 'react-router'; …推荐指数
解决办法
查看次数
处理ag网格反应并呈现复选框网格
我正在搞乱ag-grid,react-apollo,一切似乎都运转正常.这里的目标是单击一个复选框,并在修改某些数据时发生变异/网络请求.我遇到的问题是它重绘整行,这可能非常慢但我真的只是想更新单元本身,所以它的快速和用户体验更好.我有一个想法是做一个乐观的更新,只是更新我的缓存/利用我的缓存.你们采取了什么方法.
通过apollo查询抓取列和行数据.
下面是一些代码:
CheckboxRenderer
import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import _ from "lodash";
class CheckboxItem extends Component {
constructor(props) {
super(props);
this.state = {
value: false
};
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
}
componentDidMount() {
this.setDefaultState();
}
setDefaultState() {
const { data, colDef, api } = this.props;
const { externalData } = api;
if (externalData && externalData.length > 0) {
if (_.find(data.roles, _.matchesProperty("name", colDef.headerName))) {
this.setState({
value: true
});
}
}
}
updateGridAssociation(checked) {
const { …推荐指数
解决办法
查看次数
Bootstrap网格系统,列太长
所以我正在为我的应用程序编写一些前端,并且我意识到前一行和下一行之间存在差距,因为其中一个网格元素太长,在尝试嵌套行之后我仍然无法将其转换为工作.下面是一个例子:
https://jsfiddle.net/kkotwal94/f6d9dp98/embedded/result/
<div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Profile <small>My Info</small>
</h1>
<ol class="breadcrumb">
<li class="active"> <i class="fa fa-dashboard"></i>
<Link to="/dashboard/main">Dashboard</Link>
</li>
<li>Profile</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">{"First Name: " + firstName}</li>
<li class="list-group-item">{"Last Name: " + lastName}</li>
<li class="list-group-item">{"Section: " + section}</li>
<li class="list-group-item">{"Gender: " + gender}</li>
<li class="list-group-item">{"Location: " + location}</li>
</ul>
</div>
<div class="panel-footer">Current Profile</div> …推荐指数
解决办法
查看次数
AGGrid with react，调用 this.gridApi.sizeColumnsToFit(); 不适合列
我的问题是我的网格根本不会保持响应，或者如果我尝试创建一个没有那么多列的网格，整个网格看起来很奇怪。我想让它伸展到它的容器宽度。这就是我希望 sizeColumsToFit 做的事情。我收到警告：ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?但是我该如何解决这个问题。例如，我从我的减速器加载数据，因此会发生重新渲染，或者当我的数据处于获取状态时我有一个加载微调器。你们采取什么模式来解决这个问题？
这是一个例子： 
onGridReady(params) {
const { mode } = this.props;
this.gridApi = params.api;
this.gridApi.mode = mode;
this.columnApi = params.columnApi;
this.gridApi.addDispatcher = this.props.add;
this.gridApi.deleteDispatcher = this.props.delete;
this.gridApi.updateDispatcher = this.props.update;
console.log(window.innerWidth);
this.sizeToFit();
window.onresize = () => {
this.gridApi.sizeColumnsToFit();
};
}
这是我的渲染方法：
determineRender() {
const {isWaiting, columnDefs, schema } = this.props;
let { data } = …推荐指数
解决办法
查看次数
乐观的 React Apollo ui 滞后于 React Beautiful 拖放
我正在尝试创建一个乐观的响应，其中 ui 会通过拖放数据立即更新（最小延迟和更好的用户体验）。然而，我遇到的问题是它无论如何都会滞后。
所以发生的事情是我希望从我的查询中得到一个区域和未分配区域的列表，unassignedZone 是一个对象，其中包含城市，区域是一个区域列表，其中包含城市。在编写我的突变时，我会在拖放它们后返回重新排序的新区域列表。重新排序是由名为“DisplayOrder”的区域对象上的字段完成的。逻辑是正确设置数字。问题是，当我尝试用乐观的 ui 和更新来模仿它时，会有一点延迟，就像它仍在等待网络一样。
我试图实现的大部分内容都发生在 onDragEnd = () => { ... } 函数中。
import React, { Component } from "react";
import { graphql, compose, withApollo } from "react-apollo";
import gql from "graphql-tag";
import { withState } from "recompose";
import { withStyles } from "@material-ui/core/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Input from "@material-ui/core/Input";
import Grid from "@material-ui/core/Grid";
import InputLabel from "@material-ui/core/InputLabel";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import AppBar from "@material-ui/core/AppBar";
import …推荐指数
解决办法
查看次数
Server side rendering with devextreme and material ui @react16
After refreshing the page (and going through my ssr) it looks like none of the css is sustained unless I navigate through my app and get back to it Or even click some elements. Are there any examples of how this is done correctly?
Im using the exact same code from the controlled 'react material ui grid' example:
https://github.com/kkotwal94/DrivingService (develop branch) <- where the component is under components / demoBase, and the SSR is under server/render/pageRender.jsx. I use the material …
推荐指数
解决办法
查看次数
Sequelize + sequelize cli 播种大量随机数据
在 node/sequelize cli 中为两个单独的表和连接表插入数据的最佳方法或任何方法是什么
即我有一个地址表，我添加了这个
const faker = require('faker');
const models = require('./server/db/sequelize/models');
const States = models.States;
const Addresses = models.Addresses;
module.exports = {
up: (queryInterface) => {
return Promise.all([
for (let i = 0; i < 1000; i++) {
Addresses.create({
streetName: faker.address.streetAddress(),
streetNameAlt: faker.address.streetAddress(),
zipCode: faker.address.zipCode(),
town: faker.address.county(),
city: faker.address.city(),
stateId: id,
addressTypeId: 1,
createdAt: faker.date.recent(),
updatedAt: faker.date.recent(),
});
}
},
down: (queryInterface) => {
return queryInterface.bulkDelete('Addresses', null, {});
}
};
然而，当我生成一个用户时，我想从我的地址表中选择一个随机地址作为 addressId 并创建一个联合记录
IE
const faker = require('faker'); …推荐指数
解决办法
查看次数
标签 统计
reactjs ×7
ag-grid ×2
apollo ×2
css ×2
node.js ×2
react-apollo ×2
react-router ×2
.htaccess ×1
apache ×1
devextreme ×1
html ×1
javascript ×1
jquery ×1
jss ×1
material-ui ×1
react-dnd ×1
sequelize.js ×1
socket.io ×1