我有一个这样的数据结构:
{
"subject": "Ah yeah",
"description": "Jeg siger...",
"daysOfWeek": [
{
"dayOfWeek": "MONDAY",
"checked": false
},
{
"dayOfWeek": "TUESDAY",
"checked": false
},
{
"dayOfWeek": "WEDNESDAY",
"checked": true
},
{
"dayOfWeek": "THURSDAY",
"checked": false
},
{
"dayOfWeek": "FRIDAY",
"checked": false
},
{
"dayOfWeek": "SATURDAY",
"checked": true
},
{
"dayOfWeek": "SUNDAY",
"checked": true
}
],
"uuid": "da8f56a2-625f-400d-800d-c975bead0cff",
"taskSchedules": [],
"isInitial": false,
"hasChanged": false
}
Run Code Online (Sandbox Code Playgroud)
在daysOfWeek我想确保至少有一个项目有checked: true.
到目前为止,这是我的验证模式(但不起作用):
const taskValidationSchema = Yup.object().shape({
subject: Yup.string().required('Required'),
description: Yup.string(),
daysOfWeek: Yup.array()
.of( …Run Code Online (Sandbox Code Playgroud) 我试图在AngularJS中制作拦截器.我对AngularJS很新,发现了一些Interceptor的例子,但是无法让它工作.
在这里,我有我的app.js文件,其中包含所有相关代码.我还有一个控制器调用REST api并返回JSONP.
首先,我声明模块然后配置它(定义Interceptor).它现在应该捕获所有请求并输出到控制台...
使用app.factory创建拦截器是错误的吗?
var app = angular.module(
'TVPremieresApp',
[
'app.services'
, 'app.controllers'
]
);
app.config(function ($httpProvider) {
$httpProvider.responseInterceptors.push('errorInterceptor');
});
app.service('MessageService', function () {
// angular strap alert directive supports multiple alerts.
// Usually this is a distraction to user.
//Let us limit the messages to one
this.messages = [];
this.setError = function(msg) {
this.setMessage(msg, 'error', 'Error:');
};
this.setSuccess = function(msg) {
this.setMessage(msg, 'success', 'Success:');
};
this.setInfo = function (msg) {
this.setMessage(msg, 'info', 'Info:');
};
this.setMessage = function(content, type, …Run Code Online (Sandbox Code Playgroud) 我在反应式Web应用程序中使用了material-ui.我需要组件中的"动作/描述"图标,但在大纲版本中.
根据文件:
为方便起见,Material-UI中提供了完整的Google Material图标集作为预构建的SVG Icon组件.
所以我可以这样做以获得"填充"版本:
import ActionDescription from 'material-ui/svg-icons/action/description'
<div className="number">
<ActionDescription />
</div>
Run Code Online (Sandbox Code Playgroud)
但是我如何获得"大纲"版本?我试过用css但没有成功:
<div>
<ActionDescription style={{black: "black"}} color="transparent" />
</div>
Run Code Online (Sandbox Code Playgroud) 我找不到具有适当文档的React Datetime组件.我需要使用Semantic UI React在React项目中使用Datetime选择器.
我试过https://github.com/react-component/calendar但是无法让它正常运行......似乎选项非常有限(这是奇怪的顺便说一句......).
你能用这些库提供一个日期时间选择器的工作示例吗?
我想使用单独的数据库来运行测试。所以我尝试为多个环境(开发和测试)配置 TypeORM,但它不起作用。它仅使用“开发”配置。
这是我的 npm 脚本:
"scripts": {
"start": "NODE_ENV=dev node dist/index.js",
"test": "NODE_ENV=test mocha --reporter spec --compilers ts:ts-node/register 'test/**/*.test.ts'"
}
Run Code Online (Sandbox Code Playgroud)
如果我console.log(process.env.NODE_ENV)得到正确的结果(“开发”/“测试”)。
这是我的 ormconfig.json
[
{
"environment": "dev",
"name": "default",
"driver": {
"type": "mysql",
"host": "localhost",
"port": 3306,
"username": "root",
"password": "",
"database": "api"
},
"entities": [ "dist/model/*.js" ],
"autoSchemaSync": true
},
{
"environment": "test",
"name": "default",
"driver": {
"type": "mysql",
"host": "localhost",
"port": 3306,
"username": "root",
"password": "",
"database": "api_test"
},
"entities": [ "dist/model/*.js" ],
"autoSchemaSync": true
} …Run Code Online (Sandbox Code Playgroud) 我试图从 Create React App 3 (CRA)、Typescript、Material UI 和 styled-components 设置 react-styleguidist (RSG)。我被这个错误困住了:
./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'
Run Code Online (Sandbox Code Playgroud)
我按照文档为 MUI 主题和样式组件设置了一个包装器:https :
//react-styleguidist.js.org/docs/thirdparties.html#styled-components
/styleguidist/MuiThemeWrapper.tsx
./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'
Run Code Online (Sandbox Code Playgroud)
我的 styleguidist 配置:
/styleguidist.config.js
const path = require('path');
module.exports = {
components: "src/components/**/layout.{js,jsx,ts,tsx}",
propsParser: require('react-docgen-typescript').withCustomConfig(
'./tsconfig.json'
).parse,
serverPort: 6161,
styleguideComponents: {
Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.jsx')
}
};
Run Code Online (Sandbox Code Playgroud)
我的 tsconfig 遵循标准的 CRA / MUI 建议
https://material-ui.com/guides/typescript/
配置文件
{
"compilerOptions": {
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": …Run Code Online (Sandbox Code Playgroud) typescript reactjs material-ui styled-components react-styleguidist
我是 Formik React Forms lib 的新手。我想知道为什么我需要在 setTimeOut 中包装 onSubmit 代码:
<Formik
initialValues={{ name: 'jared' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
>
Run Code Online (Sandbox Code Playgroud)
我在文档中找不到任何解释。据我所知,该函数既可以是同步的也可以是异步的...
调用RESTful服务时,我有一个拦截器来捕获HTTP错误:
services.config(function($httpProvider) {
$httpProvider.responseInterceptors.push('globalInterceptor');
var elementsList = $();
// this message will appear for a defined amount of time and then vanish again
var showMessage = function(content, cl, time) {
$('<div/>')
.addClass(cl)
.hide()
.fadeIn('fast')
.delay(time)
.fadeOut('fast', function() { $(this).remove(); })
.appendTo(elementsList)
.text(content);
};
});
services.factory('globalInterceptor', function($q){
//When the interceptor runs, it is passed a promise object
return function(promise){
//In an interceptor, we return another promise created by the .then function.
return promise.then(function(successResponse){
//Do your code here if the response was …Run Code Online (Sandbox Code Playgroud) 从Angular 1.2 - > 1.4更新后,我遇到动画问题.
我通过更改视图容器元素上的css类来设置页面过渡的动画.我使用ui-router并在元素上使用ng-class指令.用户使用箭头键(app.run()中的事件侦听器)进行导航.这将类设置为$ rootScope上的字符串变量'navDirection'(左/右).
更新后,似乎在动画之后设置了$ rootScope.navDirection.因此,当用户改变方向时动画是错误的.
任何建议和/或评论表示赞赏!
的index.html
<body ng-cloak ng-keydown="handleEvt($event)">
<div class="page-wrapper page-wrapper--constrain" ng-class="{'page-wrapper--decorate' : decoratePageContent === true}">
<div class="page-content group position-context">
<div ui-view class="slide" ng-class="{'at-view-slide-in-left at-view-slide-out-right': navDirection == 'right', 'at-view-slide-in-right at-view-slide-out-left': navDirection == 'left'}"></div>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
app.js
var app = angular.module('my-app', [
'ui.router',
'ngAnimate'
]);
// ...
app.run(function ($rootScope, navigationService) {
$rootScope.handleEvt = function(e) {
if ($rootScope.navVisible) {
switch (e.which) {
// right
case 37:
$rootScope.navDirection = "right";
navigationService.navigate(navigationService.getCurrentPageIndex() - 1);
break;
// left …Run Code Online (Sandbox Code Playgroud) 我试图获取特定日期范围内的所有文件.我在我的Express路由器中使用MomentJS和Mongoose.但结果集为空:
router.route("/bookings")
// GET
.get(function(req, res) {
var start,
end;
// set time zone
moment().tz("Europe/Copenhagen").format();
start = moment(req.query.start * 1000).toDate();
end = moment(req.query.end * 1000).toDate();
Booking.
find({
startDate: {
$gte: start,
$lte: end
}
}).
exec(function(err, bookings) {
if (err) handleErr(res, err);
console.log(err);
console.log(bookings);
res.json(bookings);
});
})
Run Code Online (Sandbox Code Playgroud)
该路由接收开始和结束日期为UNIX TIMESTAMPS(也来自客户端的MomentJS).
如果我从mongo shell查询,我会得到正确的文件:
db.bookings.find({startDate: { $gte: "2016-02-29T00:00:00+01:00", $lte: "2016-03-06T23:59:59+01:00" } }, {startDate: 1})
Run Code Online (Sandbox Code Playgroud)
如果我在console.log日期,我会得到与查询数据库时相同的格式.
我试过/没有UNIX*1000但没有运气...
我究竟做错了什么?
angularjs ×3
reactjs ×3
formik ×2
interceptor ×2
javascript ×2
material-ui ×2
animation ×1
date ×1
momentjs ×1
mongodb ×1
mongoose ×1
node.js ×1
semantic-ui ×1
typeerror ×1
typeorm ×1
typescript ×1
yup ×1