小编sil*_*513的帖子

如何安全地渲染html in react?

我从文本区域获得了一些用户生成的html标记,我想将其渲染到屏幕的另一部分.标记在组件的props中保存为字符串.

出于显而易见的原因,我不想使用dangerouslysethtml.是否有一个解析器,如标记,但对于HTML,以便它删除脚本标签和其他无效的HTML.

html reactjs

22
推荐指数
3
解决办法
2万
查看次数

propType是JSX prop的反应是什么?

在反应中,您可以设置进入组件的道具的propType.对于我的一个道具,我希望值为null或一行JSX.React文档没有涵盖propType应该用于JSX的内容.

测试时我发现在使用对象或元素的propTypes时不会抛出错误.当使用另一个如符号时,我会得到一个错误,表示它是一个对象.如果它是一个对象肯定它应该抱怨它是一个元素.

JSX的正确propType是什么?

javascript reactjs

15
推荐指数
2
解决办法
3399
查看次数

moment.js差异日期格式

我正在使用moment.js并想要计算两个时间戳之间的差异,然后将它们格式化并在div中显示它们.

var diffTime = moment(1390310146.791877).diff( 1390309386.271075);
Run Code Online (Sandbox Code Playgroud)

这给了我760秒,但我想像这样格式化:

(天,小时,分钟,秒),如果它们高于0,则仅显示天,小时和秒.

我如何实现这一目标?

javascript date momentjs

12
推荐指数
2
解决办法
4万
查看次数

webpack构建较少的文件输出一个css minify文件

webpack是我需要将少量文件传递到一个缩小的CSS文件中的工具吗?
如果是这样,我不确定我在下面的代码中做错了什么?
有没有办法输出到不同的文件路径,现在我的js文件输出到'./assets/javascripts/bundle/',我想我的css文件输出到'./assets/stylesheets/bundle/',我该怎么做?

更新
我做了一个测试,我可以将较少的文件构建到一个css文件,但仍然无法找到如何为输出文件夹设置多个路径,现在我必须注释掉js条目部分并更改输出路径...

webpack配置

var path = require('path');
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
    // stylesheets
    'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
  },
  output: {
    path: './assets/javascripts/bundle/',
    filename: '[name].js'
  },
  resolve: {
    alias: {
      jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
      "jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    }),
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") …
Run Code Online (Sandbox Code Playgroud)

javascript css webpack

8
推荐指数
1
解决办法
8826
查看次数

如何在使用之前检测复制到剪贴板功能

我正在尝试在纯JS中创建一个复制功能,所以没有闪存.我遇到的问题是,当浏览器不支持复制到剪贴板时,我不想显示复制按钮.

我正在使用该document.execCommand('copy')方法复制到剪贴板,但对此的支持并不是最好的.例如,safari具有execCommand函数,但不支持copy参数.这意味着我不能简单地检查函数是否存在.

由于这种狡猾的支持,我认为我将不得不采用浏览器检测的方式,就像我在查看zeroclipboard问题时遇到的github一样.是我找到的实现.

有没有正确的方法来检测用户代理?我宁愿不使用NavigatorID.userAgent,因为根据MDN不推荐使用它.

javascript copy-paste

8
推荐指数
1
解决办法
1636
查看次数

有没有办法使用变量创建对象并忽略未定义的变量?

我正在尝试找到一种创建对象的方法,在创建时它会忽略未定义的值.

在下面的示例中,变量some​​Names在创建对象时具有未知内容.

const someNames = {
  catName: 'purry',
  rabbitName: 'floppy',
  turtleName: 'shelly'
};

const { catName, dogName, hamsterName, rabbitName } = someNames;

const animalNames = Object.assign({}, {
  catName,
  dogName,
  hamsterName,
  rabbitName
});

console.log(animalNames);// {catName: 'purry', rabbitName: 'floppy'}
Run Code Online (Sandbox Code Playgroud)

实际记录的内容是:

{
  catName: 'purry',
  dogName: undefined,
  hamsterName: undefined,
  rabbitName: 'floppy'
}
Run Code Online (Sandbox Code Playgroud)

javascript object ecmascript-6

5
推荐指数
1
解决办法
3794
查看次数

您何时在对象上使用ES6地图?

我一直在关注MDN上的新ES6文档,我无法找到普通对象不起作用的Map对象的真实世界用途.有没有人有地图的任何用例,并解释为什么一个对象在那种情况下不起作用?

javascript ecmascript-6

4
推荐指数
1
解决办法
277
查看次数

在样式组件中使用@supports

我最近改用样式化组件进行样式设置,并且一直在尝试使CSS的@supports功能正常运行,但是没有运气。

@supports语法的用法类似于:

@supports (display: grid) {
    .Container {
        background-color: orange;
    }
}
Run Code Online (Sandbox Code Playgroud)

现在,这很好,因为样式化组件文档具有以下行:

注意:“&”号将替换为该样式化组件生成的唯一类名

但是,当我尝试使用&符来使用它时,它不起作用。当使用下面的代码时,我在输出的CSS中得到一个&符号

const Container = styled.div`
    @supports (display: block) {
      & {
        background-color: seagreen;
      }
    }
`;
Run Code Online (Sandbox Code Playgroud)

javascript css styled-components

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

Onclick功能不起作用

我尝试创建这个脚本,它在我调用函数oncall时工作,但是当我创建一个按钮并使用onclick函数时,脚本不会运行.

var i = 0;

function increase() {

    var amount = parseInt($('.amount').text());

    i = amount;
    var random = Math.floor(Math.random() * amount);
    var counter = window.setInterval(function () {
        if (i == amount + random) {
            window.clearInterval(counter);
        }
        document.getElementById('result').innerHTML = i++;
    }, 10);
}
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/7MLK5/2/

jquery onclick

0
推荐指数
1
解决办法
151
查看次数