小编zaq*_*zaq的帖子

使用GraphQL和React-Native继续使用Redux vs Apollo

我必须从头开始一个新的(web + native)项目(中型应用程序).由于过去几年里有过多的JS框架和实现,我对我平常的堆栈有了第二个疑问.

我一直在前端使用react + redux,后端使用Node和MongoDB通过REST API进行通信.

对于这个新项目,我决定使用React-Native + React Native for Web + Node + PostgreSQL.但是,我想知道我应该使用哪个框架来进行数据获取和状态/存储管理.

到目前为止,redux很适合我.但是,由于JS演变的本质.我对我过去使用过的堆栈持怀疑态度.

如果我使用下面的堆栈,有什么优缺点

React-Native + React-Native-For-Web + Redux + GraphQL + Node + PostgreSQL


React-Native + React-Native-For-Web + Relay + GraphQL + Node + PostgreSQL


React-Native + React-Native-For-Web + Apollo + GraphQL + Node + PostgreSQL
Run Code Online (Sandbox Code Playgroud)

我已经阅读了许多文章,说明使用每个框架的好处,但内容和文章的数量有点可怕.我明白没有正确或错误的答案.但是,很高兴知道上面提到的堆栈很好地记在一起 - 更少的学习曲线,良好的文档,可维护性,更少的变通方法.

reactjs graphql react-native redux relayjs

25
推荐指数
1
解决办法
9841
查看次数

如何在PhpStorm中设置内置的webserver

建立:

1)OS - Win 8.1
2)WAMP
3)PhpStorm 7.1.3

我已经在Dreamweaver上工作了很长时间,最近我因为功能有限而放弃了它.使用Dreamweaver设置本地环境非常简单,我没有遇到任何问题.所以我安装了PhpStorm认为在我使用DW时以相同的方式运行我的PHP Web应用程序非常容易,但是当我尝试使用其内置的webserver在PhpStorm中运行我的Web应用程序时,我得到了502 Bad Gateway错误,我做的是只需在PhpStorm中导入文件夹(位于www目录中)并尝试在浏览器上运行它,但我无法让它在本地工作.我相信我必须在设置下设置Interpreter,但我该如何继续,我应该包括什么?

当我使用WAMP运行我的webapp时,URL看起来像

http://localhost/appname/trunk/public/
Run Code Online (Sandbox Code Playgroud)

当我使用PhpStorm内置的webserver运行它时,URL看起来像

http://localhost:63342/appname/trunk/public/
Run Code Online (Sandbox Code Playgroud)

错误:502坏网关.

我现在很困惑.

wamp localhost phpstorm

18
推荐指数
3
解决办法
7万
查看次数

Xcode 9 - 可下载的xip文件在Apple网站上已损坏

我从Apple网站下载了新的Xcode 9版本

https://developer.apple.com/xcode/

但是,我在解压缩文件时收到以下错误

在此输入图像描述

这是可下载文件的已知问题,还是我需要执行其他操作才能解压缩xip文件.

我的Mac配置

High Sierra
System Version: macOS 10.13 (17A352a)
Kernel Version: Darwin 17.0.0
Run Code Online (Sandbox Code Playgroud)

macos xcode macos-high-sierra xcode9beta6

8
推荐指数
1
解决办法
3829
查看次数

If-else在React Stateless功能组件中

我基本上是在重构我的React组件以支持新的无状态功能组件React功能组件.但是,我对if-else功能组件中的语法感到困惑.

旧代码(工作正常):它的作用主要是查找用户当前是否已登录.如果是,则重定向到主页,否则重定向到登录页面.CurrentUser组件返回一个prop currentUser并检查当前状态

import React, {Component} from "react";
import currentUser from "shared/components/CurrentUser";
import Home from "../Home";
import Landing from "../Landing";

class DefaultRouteHandler extends Component {

    render() {
        if (!this.props.currentUser) {
            return (<Landing />);
        } else {
            return (<Home />);
        }
    }
}

export default currentUser(DefaultRouteHandler);
Run Code Online (Sandbox Code Playgroud)

新代码:现在,else如果currentUser的状态为false ,我应该如何检查条件.正如您现在所看到的,它将始终返回主页.

import React from "react";
import currentUser from "shared/components/CurrentUser";
import Home from "../Home";
import Landing from "../Landing";

const DefaultRouteHandler = ({currentUser}) => (
    <Home />
);

export …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router

7
推荐指数
3
解决办法
8790
查看次数

删除图片周围的默认边框 - Chrome浏览器

我不敢相信我是第一次遇到这个问题.关于同样的问题,我在SO上搜索了很多其他类似的问题,但是没有一个能为我工作.

我在锚标记下有一个带有class属性的img标记.

所以我的HTML看起来像:

<ul id="racing-menu" class="accordion-menu list-unstyled">
  <li>
    <a id"something" name class"something">
      <img class="icon_71">
    </a>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

CSS

.icon_71 {
  background: url(../../cms/images/sports/something.png) no-repeat;
  width: 36px;
  height: 22px;
  margin: 0 10px 0 0;
  float: left;
}
Run Code Online (Sandbox Code Playgroud)

我尝试了以下解决方案,以避免Chrome浏览器上的默认边框

1)border:0 2)outline:none 3)将img类更改为img id

4)设置

a img {
  border:none
} 

a img {
  border:0
}
Run Code Online (Sandbox Code Playgroud)

html css google-chrome css3

6
推荐指数
2
解决办法
9351
查看次数

react bootstrap - 将自定义bsStyle属性添加到按钮

我正在为我的项目使用react-bootstrap,我正在尝试向按钮组件添加自定义bsStyle属性.如果我根据以下链接http://react-bootstrap.github.io/components.html#buttons使用默认引导类,则正确呈现类名.但是,如果我将属性更改为bsStyle='facebook'它渲染btn-undefined

所以简而言之,当我将bsStyle属性传递给react bootstrap中的组时,我无能为力.

这是我的HTML看起来像

<Button id="facebook-btn" bsStyle="facebook" bsSize="large" block>
</Button>
Run Code Online (Sandbox Code Playgroud)

如果我将我的代码更改为

<Button id="facebook-btn" bsStyle="primary" bsSize="large" block>
</Button>
Run Code Online (Sandbox Code Playgroud)

它工作正常,类正确呈现.

这是控制台html日志

在此输入图像描述

javascript twitter-bootstrap reactjs react-bootstrap

6
推荐指数
1
解决办法
3048
查看次数

Brew升级不适用于最新的OSX High Sierra beta版本

升级brew包时出现以下错误

Error: Your Xcode (8.3.3) is too outdated.
Please update to Xcode 9.0 (or delete it).
Xcode can be updated from
https://developer.apple.com/download/more/
Run Code Online (Sandbox Code Playgroud)

由于我使用的是beta osx版本

High Sierra
System Version: macOS 10.13
Kernel Version: Darwin 17.0.0
Run Code Online (Sandbox Code Playgroud)

似乎我必须升级beta Xcode版本(Xcode 9),我已经从苹果网站https://developer.apple.com/xcode/成功下载并安装了该版本.

现在,我的问题是如何在我的mac上切换Xcode版本,以便brew命令使用新安装的Xcode.

当我运行时,xcodebuild -version我得到以下输出(从App商店安装)

Xcode 8.3.3
Build version 8E3004b
Run Code Online (Sandbox Code Playgroud)

而我下载的测试版是从苹果网站上直接显示的 9.0 beta 6

在此输入图像描述

macos xcode homebrew xcode9beta6

6
推荐指数
2
解决办法
4136
查看次数

使用 knex 对 3 个表执行连接操作

我有一个innerJoin对 2 个表执行操作的 SQL 查询。

表格1: user

在此处输入图片说明

表 2: local_auth

在此处输入图片说明

查询根据user_id键返回所有匹配的行

async getUser(id) {
    return camelizeKeys(
        await knex
        .select(
            'u.id',
            'u.first_name',
            'u.last_name',
            'u.username',
            'u.image_url',
            'u.is_admin',
            'u.phone',
            'u.info',
            'la.email'
        )
        .from('user AS u')
        .leftJoin('local_auth AS la', 'la.user_id', 'u.id')
        .where('u.id', '=', id)
        .first()
    );
}
Run Code Online (Sandbox Code Playgroud)

现在,我要做的是修改上面的查询,使其对 3 个表执行连接操作。

表3: customer_user

在此处输入图片说明

还有一个叫做 的表customer_user,它user_id作为外键之一。如何customer_user基于user_id. 我想执行这样的操作(但当然,由于使用 knex 执行多个连接的方式不正确,以下操作将不起作用)

async getUser(id) {
    return camelizeKeys(
        await knex
        .select(
            'u.id',
            'u.first_name',
            'u.last_name',
            'u.username',
            'u.image_url',
            'u.is_admin',
            'u.phone', …
Run Code Online (Sandbox Code Playgroud)

sql postgresql join knex.js

6
推荐指数
1
解决办法
1万
查看次数

使用最新版本 0.29.3 对字符串类型进行 Formik 和 yup 验证

我使用以下电话号码验证yup,但升级后出现 TS 错误

"yup": ^0.27.0"yup": "^0.29.3"

"@types/yup": "^0.26.27""@types/yup": "^0.29.7"

const ValidationSchema = Yup.object().shape<ICreateUserForm>({
  phone: Yup.string()
    .required("Required")
    .test("countryCode", "Must include country code", (phone?: string) => {
      return !!phone && phone.startsWith("+")
    })
    .test("isValidNumber", "Must be valid phonenumber", (phone?: string) => {
      const parsedNumber = !!phone && parsePhoneNumberFromString(phone)
      return parsedNumber && parsedNumber.isValid() ? true : false
    })
})
Run Code Online (Sandbox Code Playgroud)

错误

No overload matches this call.
  Overload 1 of 4, '(name: string, message: TestOptionsMessage<{}, any>, test: TestFunction<string | …
Run Code Online (Sandbox Code Playgroud)

validation typescript reactjs yup formik

6
推荐指数
1
解决办法
8534
查看次数

在隐藏的引导选项卡窗格上重绘Google图表

我在我的网络应用程序中使用谷歌散点图,它加载文件就绪.我最近做了一些重组,并尝试在不同的引导选项卡中划分页面内容.

如果我在活动选项卡窗格上加载图表,它可以正常工作,图表的宽度,高度参数是正确的.但是,如果我将图形移动到隐藏选项卡,则图形无法正确加载函数传递的参数(特别是宽度和高度).目前我正在调用文档中的图表.

这是我的代码

HTML

<div class="layout layout-stack-sm layout-main-right">
    <div class="col-sm-3 layout-sidebar">
        <div class="col-sm-12">
            <ul id="myTab" class="nav nav-layout-sidebar nav-stacked">
                <li class="active">
                    <a href="#quick-stats" data-toggle="tab">
                        <i class="fa fa-th"></i>
                        &nbsp;&nbsp;Quick Stats
                    </a>
                </li>
                <li>
                    <a href="#engagement-graph" data-toggle="tab">
                        <i class="fa fa-bar-chart-o"></i>
                        &nbsp;&nbsp;Engagement graph
                    </a>
                </li>
            </ul>
        </div>
    </div>  <!-- layout sidebar -->

    <div class="col-sm-9 layout-main">
        <div class="tab-content stacked-content">
            <div class="tab-pane fade in active" id="quick-stats">
                Some content   
            </div>
            <div class="tab-pane fade" id="engagement-graph">
                <div id="myMoodPage">
                <div class="graph" id="graph">
                </div>
            </div>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在文件上加载图表准备好了

<script type="text/javascript" …
Run Code Online (Sandbox Code Playgroud)

javascript jquery google-visualization twitter-bootstrap

5
推荐指数
1
解决办法
4314
查看次数