我的“主要”组件中有以下render
:
import ComponentA from './component-a.js';
import ComponentB from './component-b.js';
const App = React.createClass({
render: function() {
return (
<div>
<ComponentA/>
<ComponentB/>
</div>
);
}
});
ComponentA
需要css
个文件。所以我在component-a.js
中有以下内容:
require ('./component-a.css');
const ComponentA = React.createClass({
render: function() {
return (
<div>component a</div>
);
}
});
......而ComponentB
没有。所以我在component-b.js
中有以下内容:
const ComponentB = React.createClass({
render: function() {
return (
<div>component b</div>
);
}
});
css
(仅限)所需的ComponentA
文件为:
div {
width: 100px;
height: 30px;
border: 1px solid red;
}
即使只有ComponentA
需要css
,ComponentB
也会受到影响。这是在浏览器中呈现的内容:
似乎页面中的所有div
元素都受ComponentA
所需样式的影响。其中包括后续组件div
的{{1}}(不需要ComponentB
样式)以及包含{css
的{{1}} 1}}和div
以及由React添加的另一个ComponentA
:
ComponentB
个文件不仅仅影响需要它们的组件吗?如果没有,并且它们实际上是全局有效的,那么从特定组件中要求div
文件的语义到底是什么?
除了使用内联样式并将所有内容放在JS代码中之外,有没有办法划分CSS文件以便它们只影响需要它们的React组件?如果要使用类名来实现这种效果,则无法保证当组件与其他组件一起使用时,类名称将是唯一的。
答案 0 :(得分:3)
CSS仍然会加载到浏览器中以影响整个页面。导入css文件只是为了模块化你的css和你的js,这样当你最大限度地使用你的模块加载器时,你不仅没有加载不必要的js,你也没有加载不必要的css。
编辑:关于Instagram如何使用模块加载的视频:
https://www.youtube.com/watch?v=VkTCL6Nqm6Y&noredirect=1
您的最佳解决方案仍然是命名您的CSS。关于冲突问题,您可以使用比我在下面使用的更详细的类名,如mjb-appname-componentname
让你的ComonentA渲染:
render: function() {
return (
<div className="component-a">component a</div>
);
}
及其css文件为
.component-a div {
width: 100px;
height: 30px;
border: 1px solid red;
}
最好使用css预处理器,如less
或sass
.component-a {
div {
width: 100px;
height: 30px;
border: 1px solid red;
}
}
额外:
关于js中的内联样式的有趣讨论:http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html
讨论使用此内联样式方法引发的问题: