小编Chr*_*ris的帖子

中继 - 在查询之前设置变量

我目前正在处理一个页面,该页面显示特定用户的某组"任务"的状态.要获取数据,我有以下中继容器:

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.无论如何我可以传递这个变量,只在第一个查询中获取该成员的数据?

谢谢.

reactjs graphql relayjs

7
推荐指数
1
解决办法
1154
查看次数

使用react-router从this.props.children访问React组件

我有一个网站,其中包含以下内容react-routerreact-router-relay设置:

main.jsx:

<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组件(检查上面的路由器):

mainView.js:

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)

reactjs react-router react-router-relay

7
推荐指数
1
解决办法
671
查看次数

css last-child with:not selector

我有一个动态的数字,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,但我不知道如何实现我想要的.

html javascript css jquery css-selectors

7
推荐指数
1
解决办法
1418
查看次数

根据日期数组检查日期

我正在尝试编写一个函数,该函数根据日期是否存在于数组中而返回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] …

javascript ecmascript-5 ecmascript-6

7
推荐指数
1
解决办法
6579
查看次数

TypeScript类型检查JSX子项

我的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)

我做错了什么?或者我不明白这个问题试图修复什么?

typescript react-jsx

7
推荐指数
1
解决办法
1763
查看次数

从接口属性中删除 null

我有一些描述深层对象结构的接口。就像是:

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似乎相关,但我想将其应用于根接口,而不是每个叶子。这可以吗?

typescript

7
推荐指数
1
解决办法
1560
查看次数

jQuery代码影响我的HTML图像链接?

$(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)

我在我的代码中有这个功能来实现我页面上的滚动效果,但我认为这会影响我的图像链接.当我点击图像时,它不会链接到任何地方.我相当肯定错误在这里,但需要一些帮助找到它.

谢谢.

html anchor jquery

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

错误:相邻的JSX元素必须包装在封闭标记中

我试图打印反应组件的道具,但收到错误.请帮忙:

片段:

<!-- 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)

我期待"亲爱的你好!" 然后下一行"蓝色".但是,我收到了这个错误.

错误:

在此输入图像描述

javascript components reactjs

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

JSX与组件类实例化

有人可以向我解释以下两个陈述之间的区别吗?

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类型的变量?

javascript reactjs

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

在自定义日历中自动突出显示"其余时间"

我正在使用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

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