小编ala*_*nan的帖子
Scoped CSS未在组件中应用
我有以下表单组件:
<template>
<div>
<form>
<input placeholder="Recipe Name">
<textarea placeholder="Recipe Description..." rows="10"></textarea>
</form>
</div>
</template>
<script>
export default {
name: 'AddRecipeForm'
}
</script>
<style scoped>
form {
display: flex;
flex-direction: column;
}
</style>
在<style>使用scoped属性.
应用时,CSS 不会被加载.scoped删除后,它会被应用.
但是我希望将它保留在组件的本地.
为什么在scoped属性存在时CSS不会被应用？
推荐指数
解决办法
查看次数
如何使用AngularJS获取元素的宽度？
我意识到我可以使用jQuery来获取元素的宽度,但我很好奇; 有没有办法使用AngularJS？
推荐指数
解决办法
查看次数
使用货币符号来反映Intl FormattedNumber,而不是之后
我在React Intl中使用了FormattedNumber,它是一个具有许多不同语言功能的大型React项目.
这是我制作的Currency组件,以便我可以轻松地将格式化的货币插入到我的视图中:
import {FormattedNumber} from 'react-intl';
const Currency = (props) => {
const currency = props.currency;
const minimum = props.minimumFractionDigits || 2;
const maximum = props.maximumFractionDigits || 2;
return <FormattedNumber
value={props.amount}
style="currency"
currency={currency}
minimumFractionDigits={minimum}
maximumFractionDigits={maximum}
/>;
};
export default Currency;
该组件运行良好.并且,它按预期工作.在英语中 - 何时currency是GBP- 金额格式如下:
£4.00
在德文-当currency是EUR-它格式化为这样的:
4,00€
但是,我需要在特定情况下以不同方式格式化数量.所以,我正在寻找的是欧元在数量之前出现,如下:
€4,00
FormattedNumber可以实现吗？如果可以避免,我不想手动重新格式化格式化的数字.
推荐指数
解决办法
查看次数
用于替换特定子字符串之前和之后的特定字符的正则表达式
我正在进行Java CodingBat练习.这是我刚刚完成的那个:
给定一个字符串和一个非空字符串,在字符串中每次出现单词之前和之后返回由每个char组成的字符串.忽略在单词之前或之后没有字符的情况,如果字符位于两个单词之间,则可以包括两次char.
我的代码,有效:
public String wordEnds(String str, String word){
String s = "";
String n = " " + str + " "; //To avoid OOB exceptions
int sL = str.length();
int wL = word.length();
int nL = n.length();
int i = 1;
while (i < nL - 1) {
if (n.substring(i, i + wL).equals(word)) {
s += n.charAt(i - 1);
s += n.charAt(i + wL);
i += wL;
} else {
i++;
}
}
s = …推荐指数
解决办法
查看次数
属于某个对象的 SCSS 颜色变量
我正在重构项目的 SCSS，以将颜色映射到_colors.scss文件中它们自己的变量。
我经常遇到选择器带有 and 的background-color情况color。因此，我最终编写了以下变量：
$cool-table-bg: $brand-primary;
$cool-table-text: $white;
很快我就得到了上述的很多很多版本。
我想知道的是，我可以像在 JavaScript 中那样将上述内容分配给一个对象吗？例如：
$cool-table: {
bg: $brand-primary;
text: $white;
}
我希望能够将此类颜色称为$cool-table.bg。
这可能吗？
推荐指数
解决办法
查看次数
`console.log` 每当其值发生变化时都会生成 mobx `@observable`
有什么方法console.log可以让 a 在 mobx@observable改变值时自动触发吗？
我会使用 mobx 开发工具来完成此操作，但它会触发大量控制台日志，因此很难确定我正在跟踪其值的属性。
推荐指数
解决办法
查看次数
React Native WebView滚动行为无法按预期工作
我有一个本机应用程序,它使用React Native WebView来包装网页.
<WebView
ref={webview => (this.webview = webview)}
source={{
uri: `http://localhost:8000`
}}
/>
在此示例中,页面只是指向具有以下代码的localhost实例,当用户滚动时,该代码会递增一个数字:
var i = 0;
var $el = document.getElementById('counter')
window.addEventListener('scroll', function(e) {
e.preventDefault();
i += 1;
$el.innerText = i
});<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="height: 2000px; background: linear-gradient(dodgerblue, yellowgreen)">
<div id="type"></div>
<div id="counter" style="position: fixed">0</div>
</body>
</html>React Native内部的滚动行为的行为WebView方式与浏览器不同.它会在触发scroll事件之前等待滚动完成.
这是行为的比较; 在浏览器中,滚动事件在滚动正在进行时触发,按照需要和预期进行:
在iOS 11中的React Native项目中,滚动事件在滚动完成后触发:
大概是出于性能原因而使用此行为,但它几乎杀死了我的应用程序的预期行为. …
推荐指数
解决办法
查看次数
'占位符'字符,以避免积极比较？
我正在通过Java的CodingBat练习.我遇到了以下问题:
给定2个包含字符串长度的数组,将一个数组中的第一个字符串与另一个数组中的第一个字符串进行比较,将第二个字符串与第二个字符串进行比较,依此类推.计算2个字符串非空的次数,并以相同的char开头.字符串可以是任何长度,包括0.
我的代码是这样的:
public int matchUp(String[] a, String[] b){
int count = 0;
for (int i = 0; i < a.length; i++) {
String firstLetterA = a[i].length() == 0
? "ê"
: a[i].substring(0, 1);
String firstLetterB = b[i].length() == 0
? "é"
: b[i].substring(0, 1);
if (firstLetterA.equals(firstLetterB)) {
count++;
}
}
return count;
}
我的问题是:哪个'占位符'字符被认为是良好的做法,以避免不必要的比较firstLetterA和firstLetterB？
在这种情况下,我只分配了两个很少使用的不同字母(至少用英文).我尝试使用''(一个空字符,而不是一个空格)但当然,它们相互匹配.我也尝试过使用null它们,因为我认为它无法进行积极的比较,但这也会导致问题.
推荐指数
解决办法
查看次数
导入与其所在目录同名的JavaScript文件
在我的React和Webpack项目中,我有以下React组件的项目结构:
Component/
??? Component.jsx
??? index.jsx
??? styles.css
该index.jsx文件只是导入和导出Component.jsx; 原因是在需要它的文件中,它允许使用以下内容:
import Component from '../Component'
而不是
import Component from '../Component/Component'
然而,这似乎是一个不必要的额外步骤,需要所有新组件都遵循.
考虑到这一点,我的问题是:我可以两全其美吗？我希望能够只Component.jsx和styles.css我的目录中,但不必在我两次使用的名称import声明.
推荐指数
解决办法
查看次数
当粘性元素在容器内时保持粘性定位行为(因为React必须呈现单个父元素)
我有一个主要内容的顶部部分.
顶部包含5个部分:"主标题",3个"类别"和"设置".
如果用户向下滚动页面,"主标题"将保留sticky在页面顶部,并settings保留sticky在页面顶部.虽然"类别"仍然可见,但它们会逐渐折叠,再次使用position: sticky.
这是一个GIF示例:
这是一个演示:
body {
height: 300vh;
}
.header {
height: 100px;
}
.header__main {
background-color: springgreen;
position: sticky;
top: 0;
}
.header__category--top {
background-color: grey;
position: sticky;
top: 100px;
}
.header__category--middle {
background-color: darkgrey;
position: sticky;
top: 100px;
}
.header__category--bottom {
background-color: lightgrey;
position: sticky;
top: 100px;
}
.header__settings {
background-color: gold;
position: sticky;
top: 100px;
}
.header, .main {
display: flex;
justify-content: center;
align-items: center;
font-size: 40px; …推荐指数
解决办法
查看次数