小编Sys*_*ral的帖子

我有以下数据:

var data = [
    { index : 1, sort : 10, parent : 0 },
    { index : 2, sort : 7, parent : 0 },
    { index : 3, sort : 15, parent : 1 },
    { index : 4, sort : 4, parent : 0 },
    { index : 5, sort : 13, parent : 1 },
    { index : 6, sort : 20, parent : 5 },
    { index : 7, sort : 2, parent : …

如果我有一个简单的react组件来记录按钮的点击次数,那么每次点击都会记录一个新的历史记录状态而不更改url.当用户点击回来时,如何将状态恢复到原样？

我可以在这里使用本机JavaScript历史记录对象,但是当用户转换回第一个状态并从另一个组件返回到此状态的最后一个状态时,它会失败.

我怀疑使用react-router(1.0)有更好的方法吗？

import React, { Component } from 'react';

export default class Foo extends Component {
  state = {
    clickCount: 0,
  };

  componentWillMount() {
    window.onpopstate = (event) => {
      if (event.state.clickCount) {
        this.setState({ clickCount: event.state.clickCount });
      }
    };
  }

  onClick() {
    const newClickCount = this.state.clickCount + 1;
    const newState = { clickCount: newClickCount };
    this.setState(newState);
    history.pushState(newState, '');
  }

  render() {

    return (
      <div>
        <button onClick={this.onClick.bind(this)}>Click me</button>
        <div>Clicked {this.state.clickCount} times</div>
      </div>
    );
  }
}

我有一组具有 defaultValue 集的 React 输入元素。这些值使用 onBlur 事件更新。

我在页面上还有另一个操作来更新这些输入元素中的所有值。发生这种情况时，有没有办法强制反应以呈现新的默认值？

我不能轻易使用 onChange 因为它会触发过早的重新渲染（输入包含显示顺序值，过早的重新渲染会移动它们）。

我可以创建一个重复的状态，一个用于仅使用 onBlur 更新的真实值，另一个用于在编辑时更新输入元素中的值。这远非理想。仅重置默认值会简单得多。

我试图通过将函数名称作为字符串传递然后调用它来访问嵌套函数.例如,请看这篇文章

function outer(action){
    window["outer"][action]();

    function inner(){
        alert("hello");
    }
}
outer("inner");

但它不起作用.错误:

window.outer[action] is not a function

如何使这项工作,或调用嵌套函数的替代方法.

这样做的原因是我试图隐藏一系列由函数作用域内的iframe调用的函数.

我想检查特定样式是否已应用于元素.最好使用css选择器.

例如:

...
<div id="my_div" style="display: block; background-color:#fff;">
    some content
</div>
...

无论背景颜色如何,如何测试显示是否为块？

我正在构建一个执行大量客户端数据下载和处理的应用程序.通过在驻留在子域上的iframe中处理,数据处理与主应用程序隔离.这是iframe下载数据.通过postMessage进行通信.

一切都很好,除了它可能会更好.

如果用户打开额外的选项卡/窗口,应用程序当前会重新加载所有数据,甚至可能会执行重复的处理工作,这不是一个问题,除了它减慢了所有内容并且页面加载时间更长.

我想要做的是让每个顶级选项卡/窗口只与一个处理iframe通信,如果原始窗口关闭,可以恢复.问题是,这些不是通过javascript打开,而是通过普通的浏览器方法打开标签中的链接,所以我无法获得发送消息所需的iframe的引用.

无论如何我可以将iframe的窗口引用传递给其他选项卡,以便它们可以通过postMessage与它通信吗？这可以通过共享工作者实现吗？

我意识到我可以将共享工作者用于整个处理任务,但这会产生问题,因为数据来自第三方域,无法从工作人员中访问.

只需要与所有主流浏览器的最新版本兼容.

编辑:我刚刚发现在Firefox中尚未实现SharedWorker,所以我想这不会起作用.我可以通过其他方式实现这一目标吗

编辑2:我发现你可以使用:

var win = window.open('', 'my_window_name'); 

从任何其他窗口捕获对iframe的引用.但是,如果iframe尚不存在,则会将其作为窗口打开.即使它立即关闭,也会导致闪烁并导致"弹出窗口被阻止"消息,使其无法使用.

如果我有以下HTML

<ul id="some_list">
    <li class="hide">Do Not Target This</li>
    <li class="hide">Do Not Target This</li>
    <li>Target This</li>
    <li>Do Not Target This</li>
</ul>

如何定位没有隐藏类的第一个孩子？例如

#some_list>li:not(.hide):first-child {
    color: #777;
}

但这不起作用.

小提琴

我有一个使用Bookshelf/Knex的db api.

我有多个看起来像这样的Bookshelf模型:

import bookshelf from '../bookshelf';

var Product = bookshelf.Model.extend({
  tableName: 'product'
  // ...
});
export default Product;

书架包括如下:

import dbConfig from './dbConfig';

const knex = require('knex')(dbConfig);
const bookshelf = require('bookshelf')(knex);

module.exports = bookshelf;

我也有多个api动作调用看起来像这样:

import Product from '../../Models/Product';

export default function getProducts(bookshelf) {

  return new Promise((resolve) => {

    Product.collection().fetch().then((products) => {
      resolve({
        products
      });
    });
  });
}

我的问题是knex池连接,我需要在解析操作文件中的请求之前销毁连接池.但是,为了做到这一点,我需要访问模型中导入的书架或knex对象.

我想不出这样做的简洁方法.我可以在调用该操作的顶级文件中创建knex对象,然后该进程可能在收到响应时破坏连接.但是我必须将它传递给动作然后传递给模型.我怎么能这样做,以便连接池被销毁而不必在任何地方传递knex对象？

什么是更简洁的写作方式.pageType始终与React元素名称相同,我应该可以取消switch语句.

import React, {Component, PropTypes} from 'react';
import Standard from './Standard/Standard';
import Banners from './Banners/Banners';

export default class ProductPages extends Component {
  static propTypes = {
    pageType: PropTypes.string.isRequired
  }

  render() {

    let ProductPage;
    switch (this.props.pageType) {
      case 'Standard':
        ProductPage = <Standard products={products}/>;
        break;
      case 'Banners':
        ProductPage = <Banners products={products}/>;
        break;
      default:
        throw new Error('pageType is not valid');
    }

    return ProductPage;
  }
}

如何编写具有两个condtional选择器的选择器,例如

$("#version option:selected **AND** option:contains('some text')")