小编Mue*_*ers的帖子

是否可以通过JavaScript检查文件/页面是否存在但是阻止404错误显示在控制台中？

我希望设置background-image(或甚至通过伪元素:after或渲染图像:before)到rel属性的值,这将是一个URL ,但仅在某些情况下(这是一个云文件列表).例如:

HTML:

<div class="icon ${fileExtension}" rel="${fileURL}"></div>

如果我可以做这样的事情会很棒:

CSS:

.icon.png,
.icon.jpg,
.icon.jpeg,
.icon.bmp,
.icon.gif { background-image: attr(rel,url);  }

...但显然这不起作用,如果我没有弄错,attr()CSS函数只能在伪元素块内部工作.

我知道有很多方法可以使用条件JSP甚至jQuery逻辑来实现这一点,但是我想通过CSS3找出一种巧妙的方法,因为我现在只关注现代浏览器.

此外,我不想将背景图像显式设置为URL或创建<img>元素,因为默认情况下,如果文件不是受支持的图像,我宁愿显示一组预定的图标.

有没有办法bar在<Wrapper/>'静态'下面获取所有属性,例如没有渲染？

import React from 'react';
import ReactDOM from 'react-dom';

class Foo extends React.Component {
  render() {
    return(
      <div>
        <span bar="1" /> // want to collect this 'bar'
        <span bar="2" /> // want to collect this 'bar'
      </div>;
    );
  }
}


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

class Wrapper extends React.Component {
  render() {

    React.Children.forEach(this.props.children, child => {
      console.log(child.props); // can only see <FooTuple/> not <Foo/> …

我有以下Webpack配置(粗略地,它已经简化为这篇文章):

const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`;
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles');

// ... loaders:

loaders: [
  {
    test: /\.(jpe?g|png|gif|svg)$/,
    loader: 'url-loader?limit=10000&name=[path][name].[ext]'
  },
  {
    test: /\.scss$/,
    loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}`
                : ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`)
  }, // ...
]

现在这对于scss文件中正常引用的图像非常适用:

.some-static-class {
  background: url('/images/bg.png');
}

但是,它并没有使用时,工作:local指令:

:local .SomeClass {
  background: url('/images/bg.png');
}

而且我认为那是因为root为CSS加载器定义的.我收到一个构建错误:Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

如果我root从css-loader配置中删除,那么它构建正常但在Chrome的检查器中路径"看起来"正确,但是当你在新选项卡中实际打开链接时,它指向:chrome-devtools://devtools/bundled/"/images/bg.png"显然无法正确解析. …

可以使用一些帮助找出为什么我的Mustache模板无法正确呈现.我很困惑,为什么以下不起作用.我确定这是我的一个小愚蠢的错误或什么......

   var tableRows = [
    {name: 'name1',
     values: ['1','2','3']},
    {name: 'name2',
     values: ['1','2','3']},
    {name: 'name3',
     values: ['1','2','3']}
    ];

var template = $('#mustache-template').html();

$('#target').append(Mustache.render(template, {rows: tableRows}));

HTML模板:

<div id="mustache-template">
    <table>
        <tbody>
              {{#rows}}
                <tr class="">
                  <td>{{name}}</td>
                  {{#values}}
                    <td>{{.}}</td>
                  {{/values}}
                </tr>
              {{/rows}}
        </tbody>
    </table>
</div>

我期待一个表,每个数组项都是自己的行,但我得到的是:

[object Object]

这是一个jsFiddle来说明:http://jsfiddle.net/gF9ud/

我不明白为什么以下代码不起作用.(jQuery 1.6.4)

HTML:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test me"></div>
<div class="test me"></div>
<div class="test me"></div>

JS:

var rows = $([]);

console.debug('Divs we want: ', $('div:not(.me)').length);

console.debug('Rows before: ', rows.length);

$('div:not(.me)').each(function() {
    if (1==1) { // some conditional
        console.debug($(this));
        rows.add($(this));
    }
});

console.debug('Rows after: ', rows.length);

我正在使用react-router,React 0.14和nginx来渲染一个通用的JS应用程序.因为我正在转换现有的应用程序,我需要将新的'react'代码放在url前缀后面,比如说/foo

但是,我理想地喜欢nginx配置来处理在proxy_pass本地端口上运行的react服务器(例如8080).

nginx conf

location /foo/ {
    proxy_pass http://localhost:8080/;
    proxy_set_header Host $host;
}

反应路由器 routes.jsx

import HomePage from 'components/pages/HomePage';
import AboutPage from 'components/pages/AboutPage';
import NotFoundPage from 'components/pages/NotFoundPage';

export default (
    <Route path="/">
        <IndexRoute component={HomePage} />
        <Route path="about" component={AboutPage} />
        <Route path="*" status={404} component={NotFoundPage} />
    </Route>
);

服务器上没什么特别的.服务器端呈现似乎工作正常,但当它到达客户端时,由于路径不匹配,它在控制台中显示以下警告:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the …