我从文本区域获得了一些用户生成的html标记,我想将其渲染到屏幕的另一部分.标记在组件的props中保存为字符串.
出于显而易见的原因,我不想使用dangerouslysethtml.是否有一个解析器,如标记,但对于HTML,以便它删除脚本标签和其他无效的HTML.
在反应中,您可以设置进入组件的道具的propType.对于我的一个道具,我希望值为null或一行JSX.React文档没有涵盖propType应该用于JSX的内容.
测试时我发现在使用对象或元素的propTypes时不会抛出错误.当使用另一个如符号时,我会得到一个错误,表示它是一个对象.如果它是一个对象肯定它应该抱怨它是一个元素.
JSX的正确propType是什么?
我正在使用moment.js并想要计算两个时间戳之间的差异,然后将它们格式化并在div中显示它们.
var diffTime = moment(1390310146.791877).diff( 1390309386.271075);
Run Code Online (Sandbox Code Playgroud)
这给了我760秒,但我想像这样格式化:
(天,小时,分钟,秒),如果它们高于0,则仅显示天,小时和秒.
我如何实现这一目标?
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) 我正在尝试在纯JS中创建一个复制功能,所以没有闪存.我遇到的问题是,当浏览器不支持复制到剪贴板时,我不想显示复制按钮.
我正在使用该document.execCommand('copy')方法复制到剪贴板,但对此的支持并不是最好的.例如,safari具有execCommand函数,但不支持copy参数.这意味着我不能简单地检查函数是否存在.
由于这种狡猾的支持,我认为我将不得不采用浏览器检测的方式,就像我在查看zeroclipboard问题时遇到的github一样.这是我找到的实现.
有没有正确的方法来检测用户代理?我宁愿不使用NavigatorID.userAgent,因为根据MDN不推荐使用它.
我正在尝试找到一种创建对象的方法,在创建时它会忽略未定义的值.
在下面的示例中,变量someNames在创建对象时具有未知内容.
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) 我一直在关注MDN上的新ES6文档,我无法找到普通对象不起作用的Map对象的真实世界用途.有没有人有地图的任何用例,并解释为什么一个对象在那种情况下不起作用?
我最近改用样式化组件进行样式设置,并且一直在尝试使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) 我尝试创建这个脚本,它在我调用函数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)
javascript ×7
css ×2
ecmascript-6 ×2
reactjs ×2
copy-paste ×1
date ×1
html ×1
jquery ×1
momentjs ×1
object ×1
onclick ×1
webpack ×1