我目前正在处理一个页面,该页面显示特定用户的某组"任务"的状态.要获取数据,我有以下中继容器:
export default Relay.createContainer(TaskReview, {
initialVariables: {
limit: Number.MAX_SAFE_INTEGER,
studentId: null,
},
fragments: {
task: () => Relay.QL`
fragment on Task {
id,
title,
instruction,
end_date,
taskDataList(first: $limit, type: "subTasks", member: $studentId) {
edges {
node {
id,
answer,
completion_date,
}
}
},
...
Run Code Online (Sandbox Code Playgroud)
要定义我想从哪个用户获取数据,我使用:
componentWillMount = () => {
let {relay} = this.props;
relay.setVariables({
studentId: this.props.member.id
});
}
Run Code Online (Sandbox Code Playgroud)
但是,这里的问题是查询首先null
按照中的定义执行initialVariables
.我的后端实现有它,如果studentId
是NULL,那么它返回所有成员的数据.
结果是上面的查询执行了两次,第一次执行所有成员,第二次执行给定memberId
.
这与我内心的其他事物混淆了componentWillUpdate
.无论如何我可以传递这个变量,只在第一个查询中获取该成员的数据?
谢谢.
我有一个网站,其中包含以下内容react-router
和react-router-relay
设置:
<Router history={browserHistory} render={applyRouterMiddleware(useRelay)}>
<Route path="/:classroom_id" component={mainView} queries={ClassroomQueries}>
<IndexRoute component={Start} queries={ClassroomQueries} />
<Route path="tasks" component={TaskRoot} queries={ClassroomQueries}>
<IndexRoute component={TaskList} queries={ClassroomQueries} />
<Route path="task/:task_id" component={TaskView} queries={ClassroomTaskQueries} />
<Route path="task/:task_id/edit" component={TaskEdit} queries={ClassroomTaskQueries} />
</Route>
</Route>
</Router>
Run Code Online (Sandbox Code Playgroud)
该网站是一个虚拟教室,教师可以在其中为学生创建任务.这些任务也可以编辑.
当用户编辑任务TaskEdit
并点击保存时,将应用更改并将用户重定向到TaskList
.现在,我希望在编辑任务后为用户提供" 您的更改已保存! "消息.
我已经为此目的创建了一个引导警报组件(<Alert>
).
为了便于说明,假设我有以下mainView
组件(检查上面的路由器):
render() {
<div>
<Menu />
<Row>
<Col md={3}>
<Sidebar />
</Col>
<Col md={9}>
{this.props.children} <-- Start, TaskRoot, etc go here
</Col>
</Row>
<Alert someProps={...} /> …
Run Code Online (Sandbox Code Playgroud) 我有一个动态的数字,ul.column
其中一些有disabled
类.例如:
<ul class="column"></ul>
<ul class="column"></ul>
<ul class="column disabled"></ul>
Run Code Online (Sandbox Code Playgroud)
我不知道有多少可以有,但我想要应用border-right
到最后.column
这不也有.disabled
类.
我尝试过类似的东西:
ul:not(.disabled):last-child {border-right:1px solid black}
Run Code Online (Sandbox Code Playgroud)
和
ul:last-child:not(.disabled) {border-right:1px solid black}
Run Code Online (Sandbox Code Playgroud)
但无论:not(.disabled)
选择器如何,样式始终适用于最后一个元素.还有另一种方式来设计最后一种.column
那还没有.disabled
班级?
我很好用jQuery,但我不知道如何实现我想要的.
我正在尝试编写一个函数,该函数根据日期是否存在于数组中而返回TRUE或FALSE值.目前我有这个:
function isInArray(value, array) {
var a = array.indexOf(value) > -1;
if (a == false) {
return false; //DATE DOES NOT EXIST
}
else {
return true; //DATE EXISTS IN ARRAY
}
}
Run Code Online (Sandbox Code Playgroud)
现在通常我会使用for循环,但是我使用while循环生成开始日期和结束日期之间的日期列表:
while (day > 0) {
var tDate = new Date(sDate.addDays(dayCounter));
datesArray.push(tDate);
day = day - 1; //DEDUCT THE DAYS AS ADDED
var dateExists = isInArray(value, array);
if (dateExists == false) {
}
else {
matchedDays++;
}
daysCounter++;
}
Run Code Online (Sandbox Code Playgroud)
然而,这不起作用并且总是返回FALSE,我需要做什么才能使这个工作并返回正确的值?
样本数据: ARRAY[26/12/2016, 27/12/2016, 28/12/2016, 29/12/2016]
传入的价值 [27/12/2016] …
我的TypeScript版本是 2.3.2
根据这个类型检查JSX的孩子
以下代码应该有效:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
interface TestProps {
children: string | JSX.Element;
}
const Foo = (props: TestProps) => <div>{props.children}</div>;
// Error on Foo
ReactDOM.render(
<Foo>
<div>Test</div>
</Foo>,
document.getElementById('content'),
);
Run Code Online (Sandbox Code Playgroud)
但是我得到以下编译错误:
TestTsxChildren> tsc --version
Version 2.3.2
TestTsxChildren> tsc
main.tsx(11,5): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & TestProps'.
Type '{}' is not assignable to type 'TestProps'.
Property 'children' is missing in type '{}'.
Run Code Online (Sandbox Code Playgroud)
我做错了什么?或者我不明白这个问题试图修复什么?
我有一些描述深层对象结构的接口。就像是:
interface IBar {
a: string | null;
b: number | null;
}
interface IBaz {
c: string | null;
d: boolean | null;
}
interface IFoo {
bar: IBar;
baz: IBaz;
}
Run Code Online (Sandbox Code Playgroud)
目前,对于每个属性,我使用非空断言运算符,例如obj.bar.a!
. 为了避免在需要访问属性的任何地方都这样做,我想要一种方法来创建一个新接口,null
从“叶”接口中“删除”。
换句话说,我想做:
const obj: DoMagic<IFoo> = getObj();
Run Code Online (Sandbox Code Playgroud)
这样类型就变成:
{
bar: {
a: string;
b: number;
},
baz: {
c: string;
d: boolean;
}
}
Run Code Online (Sandbox Code Playgroud)
到目前为止,我只找到了与DeepPartial
我需要的完全相反的解决方案。NonNullable
似乎相关,但我想将其应用于根接口,而不是每个叶子。这可以吗?
$(document).ready(function(){
$('body a').click(function(e){
e.preventDefault();
var goTo = $(this).attr('href').replace('#','');
$('html, body').animate({
scrollTop:$('a[name="'+goTo+'"]').offset().top
},1775);
window.location.hash = "#"+goTo;
});
Run Code Online (Sandbox Code Playgroud)
我在我的代码中有这个功能来实现我页面上的滚动效果,但我认为这会影响我的图像链接.当我点击图像时,它不会链接到任何地方.我相当肯定错误在这里,但需要一些帮助找到它.
谢谢.
我试图打印反应组件的道具,但收到错误.请帮忙:
片段:
<!-- DOCTYPE HTML -->
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="http://fb. me/JSXTransformer-0.12.1.js"></script>
<!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>
<div id="div1"></div>
<script type="text/jsx">
//A component
var George = React.createClass({
render: function(){
return (
<div> Hello Dear!</div>
<div>{this.props.color}</div>
);
}
});
ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我期待"亲爱的你好!" 然后下一行"蓝色".但是,我收到了这个错误.
错误:
有人可以向我解释以下两个陈述之间的区别吗?
let test1 = new CustomComponent();
Run Code Online (Sandbox Code Playgroud)
和
let test2 = <CustomComponent />
Run Code Online (Sandbox Code Playgroud)
调试器是Chrome给我的:
for test1
CustomComponent {props: undefined, context: undefined, refs: Object, updater: Object, state: Object…}
for test2
Object {$$typeof: Symbol(react.element), key: null, ref: null, props: Object, type: function…}
Run Code Online (Sandbox Code Playgroud)
如何从test1类型的变量中获取test2类型的变量?
我正在使用vanilla JS创建一个事件调度程序.我目前正致力于通过"拖动"鼠标超过所需的时间来突出显示时间跨度.我已经让它运行得相当好,但是如果用户开始在一天(例如星期一)开始拖动到下一个(例如星期二),我希望其余时间自动突出显示.
换句话说,如果您在周一凌晨03点开始突出显示并拖到周二早上05点,则突出显示的区域应自动为03-07周一和00-05周二.
我几乎让它工作,但所有这些坐标和计算让我头晕目眩.我们非常欢迎任何帮助或指导.
这是我遇到问题的片段:
if((j >= (startCol-1) && j <= (col-1) && i >= (startRow-1) && i < (row-1))) {
rows[i].children[j].classList.add('selected');
} else if((j > (startCol-1)) && (j <= (col-1)) && (i < (startRow-1))) {
rows[i].children[j].classList.add('selected');
} else if((j < (col-1) && (j >= (startCol-1)) && (i >= (row-1)))) {
rows[i].children[j].classList.add('selected');
} else {
rows[i].children[j].classList.remove('selected');
}
Run Code Online (Sandbox Code Playgroud)
这是一个完整的片段
const table = document.querySelector('.table');
const rows = document.querySelectorAll('.row');
const sqSize = 28;
let selValue = 'p1';
let didMouseMove = false;
let startRow; …
Run Code Online (Sandbox Code Playgroud)javascript ×5
reactjs ×4
html ×2
jquery ×2
typescript ×2
anchor ×1
components ×1
css ×1
ecmascript-5 ×1
ecmascript-6 ×1
graphql ×1
react-jsx ×1
react-router ×1
relayjs ×1