小编Chr*_*ris的帖子

我正在尝试实现登录变异.该变异验证提供的id_token并通过会话记录用户.突变本身有效(用GraphiQL验证),但我遇到了将它与Relay集成的问题.

当用户登录时,整个中继存储可能会被更改,因为"viewer"是根查询.但我不想在胖查询中列出我的整个查询树.能够以某种方式清除整个商店会很好,但我没有看到这样做的方法react-router-relay.

中继突变:

export default class LoginMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`mutation {login}`;
  }

  getVariables() {
    return {
      id_token: this.props.id_token
    };
  }

  getFatQuery() {
    // TODO: list everything?
    return Relay.QL`
      fragment on LoginPayload {
        viewer
      }
    `;
  }

  getConfigs() {
    return []; // TODO: not sure what to return...
  }
}

用法:

Relay.Store.commitUpdate(new LoginMutation({id_token}), {
        onSuccess: (resp) => {
          history.push('/');
        }
      });

GraphQL架构:

input LoginInput {
  id_token: String!
  clientMutationId: String!
}

type LoginPayload {
  viewer: Viewer …

背景

我有一个用户可以提交产品评论的应用程序.用户还可以编辑先前提交的评论或为同一产品提交另一个评论.

我正在实现一个"自动保存"功能,每隔X秒保存一次表单数据.如果页面意外关闭,用户可以恢复此"草稿".

这是我的表的简化版本:

CREATE TABLE `review_autosave_data` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `review_id` int(11) unsigned DEFAULT NULL,
  `product_id` int(11) unsigned NOT NULL,
  `user_id` int(11) unsigned NOT NULL,
  `review` blob,
  `name` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `unique_index` (`product_id`, `user_id`),
  KEY `fk_review_autosave_data_review_id (`review_id`),
  KEY `fk_review_autosave_data_product_id (`product_id`),
  KEY `fk_review_autosave_data_user_id (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

请记住,此表仅存储草稿 - 而不是实际的评论.如果我们正在编辑审核,review_id则会指向该审核.如果我们正在创建新的评论,那么这个领域就是NULL.

什么工作

这是我插入新草稿的查询:

INSERT INTO review_autosave_data (review_id, product_id, user_id, review)
VALUES (25, 50, 1, "lorem ipsum") …

我正在使用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');
}

这是一个完整的片段

const table = document.querySelector('.table');
const rows = document.querySelectorAll('.row');
const sqSize = 28;
let selValue = 'p1';
let didMouseMove = false;
let startRow; …

我正在寻找将父变量中的变量传递给子容器的良好语法.

假设我有这些路线,其上有一个全局小部件列表/和特定的小部件列表/widgets/:WidgetListID.

注意:我使用react-router-relay

<Route
    path='/' component={Layout}
  >
    <IndexRoute
      component={WidgetListContainer}
      queries={ViewerQueries}
    />
    <Route
      path='/widgets/:WidgetListID'
      component={WidgetListContainer}
      queries={ViewerQueries}
    />
  </Route>

它是<WidgetList/>在<WidgetListContainer/>内部渲染的相同组件,<Layout/>这是我尝试传递WidgetListID变量的方式:

Layout.js

class Layout extends React.Component {
  render() {
    return (
      <div>
       ...
        {children}
       ...
      </div>
    );
  }
}

WidgetListContainer.js

class WidgetListContainer extends React.Component {
  render () {
    return (
      <div>
       ...
        <WidgetList 
          viewer={viewer}
        />
      </div>
    )
  }
}

export default Relay.createContainer(WidgetListContainer, {
  initialVariables: {
    WidgetListID: null
  },
  fragments: {
    viewer: …

我正在为我的网站试验类似于平铺的布局,用户可以与之交互.每个框都是用于选择产品的按钮,在选择产品时,其他框淡出并隐藏.这种效果可以切换.

我稍微修改了我在网上找到的以下小提琴,它非常接近所需的结果.

$('.box').click(function() {
  $('.box').not(this).fadeToggle(250);
});

div.box {
  width: 100px;
  height: 63px;
  background-color: #52c6ec;
  margin: 5px;
  padding-top: 37px;
  float: left;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div …

我想选择与我用于精选用户的查询相同的用户组合.

这是我想要的例子.

用户表

----------------------------------------------------------------------
UID     NAME        USERNAME        EMAIL       PASSWORD        STATUS
----------------------------------------------------------------------
1       Manoj       manoj           a@a.com     ********        1
2       Test U      testing         b@a.com     ********        1
3       Company     user            c@a.com     ********        1
4       Agency      company         d@a.com     ********        1

我的数据库中的用户表

投资组合表

-----------------------------------
PID     UID     TITLE       STATUS
-----------------------------------
1       1       title 1     1
2       1       title 2     1
3       1       title 3     1
4       2       title 1     1

我的数据库中的投资组合表 结果我想要

----------------------------------
UID     USERNAME        PORTFOLIO
----------------------------------
1       manoj           JSON OBJECT OF PID (1,2,3)
2       testing …

我有一长串字符串可以与同一个变量进行比较.

有没有更短的方法来做到这一点？

if(val=="kivi" || val=="apples" || val=="lychee" || val=="banana.C" || val=="mangos")

我最近开始使用react,我倾向于定义这样的默认值:

class TextInput extends Component {
    render() {
        return (
            <input 
                type="text" 
                name={ this.props.inputName || 'inputName' } 
                style={ this.props.inputStyle || {} } 
                className={ this.props.inputClass || '' } 
            />
        );
     }
}

代替:

class TextInput extends Component {
    render() {
        return (
            <input 
                type="text" 
                name={ this.props.inputName} 
                style={ this.props.inputStyle} 
                className={ this.props.inputClass} 
            />
        );
     }
}

TextInput.defaultProps = {
    inputName: 'inputName',
    inputStyle: {},
    inputClass: ''
}

与使用相比,这种方法有哪些缺点defaultProps？

我是 React Web 开发的新手，我正在研究 Component ref。我发现了这个注释：

您可以将函数分配为 JSX的ref属性。此函数仅在安装元素时运行一次。在此函数中，您可以将 DOM 节点放入实例的属性中。

<input ref={(input) => {this.emailInput = input}}
  className="form-control"
  type="text"
  placeholder="cad.co" />

Run Code Online (Sandbox Code Playgroud)

在目前的官方文档中，推荐使用函数作为 ref，并且提到字符串 ref 在未来的版本中可能会被弃用（https://reactjs.org/docs/refs-and-the-dom.html#legacy -api-string-refs）。

我大致了解refs和ref用作引用变量，并且可以使用ref属性字符串文字。

但我不明白如何将 ref 属性与函数参数一起使用。它如何与将字符串属性用于 ref 的工作相同或相似？

我有一个页面，其中包含多个图像。当页面加载时，它为每个 IMG 提供一个默认图像：

import default from './pics/default.jpg';

<img src={default} alt="#"/>

我想要的是这样的：

<img src1={default} src2="img url" alt="#"/>

其中 src2 在加载时覆盖 src1。

编辑： 第一个图像 (src1) 在页面加载时出现，而第二个 (src2) 是通过 Internet 请求的。示例：https : //cdn.pixabay.com/photo/2016/10/17/10/52/wind-farm-1747331__340.jpg