所以这是我目前通过ES6在webpack中导入图像和图标的工作流程:
import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'
<img src={doggy} />
这很快变得混乱.这就是我想要的:
import * from './images'
<img src={doggy} />
<img src={turtle} />
我觉得必须有一些方法动态导入特定目录中的所有文件,因为他们的名称没有扩展名,然后根据需要使用这些文件.
有人看过这个,或者对最好的方法有任何想法吗？
更新:
使用选定的答案,我能够这样做:
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));
<img src={images['doggy.png']} />
我无法弄清楚我在哪里出错:/.当我运行此代码时,我得到的只是一个空白元素.我似乎无法使用insertRule方法做任何事情(甚至不会产生错误).我错过了什么吗？
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script>
var sheet = (function() {
// Create the <style> tag
var style = document.createElement("style");
// WebKit hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
})();
sheet.insertRule("\
#gridContainer {\
width: 100%;\
height: 100%;\
}\
", 0);
</script>
</body>
</html>
所以,我将一个对象传递给ES6函数,我想将其解构为参数的参数.例如,下面的代码将记录data的道具stuff,但我想它来记录things的道具data的stuff.所以正确的答案会记录下来[1,2,3,4].我知道,根本不会混淆.任何人都知道这是否可行？
const stuff = {
data: {
things: [1,2,3,4]
}
};
const getThings = ({ data }) => {
console.log(data)
};
getThings(stuff);
这是一种"最佳实践"问题,但我仍然认为可能有正确答案.
我有一个带有六个可配置选项的指令.我应该在指令上设置六个不同的属性(如下所示):
<my-directive
my-width="300"
my-height="300"
my-status="true"
my-foo="yes"
my-bar="no">
</my-directive>
或者,我应该将配置对象传递给单个属性(如下所示):
<my-directive my-options="options"></my-directive>
这只是偏好还是有一般的首选方法？任何反馈都表示赞赏.谢谢 :)
javascript ×3
ecmascript-6 ×2
angularjs ×1
attributes ×1
css ×1
html ×1
reactjs ×1
stylesheet ×1
webpack ×1