Javascript React 中的内联 CSS 样式：如何实现媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28405444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline CSS styles in React: how to implement media queries?
提问by Paulo
I quite like the inline CSS pattern(video) in React and i am thinking about using it. However i have a question similar to this one.
我非常喜欢React 中的内联 CSS 模式（视频），我正在考虑使用它。但是我有一个类似于这个的问题。
How does one go about implementing media queries for an application using React's inline CSS pattern.
如何使用 React 的内联 CSS 模式为应用程序实现媒体查询。
回答by Mark
You can't. There are certain CSS features, like @mediaqueries, that must be defined in a declaration blockin a stylesheet.
你不能。某些 CSS 功能（例如@media查询）必须在样式表的声明块中定义。
While inline CSS is great for most styling attributes that can be applied in key-value pairs, it isn't a complete replacement for dedicated stylesheets.
虽然内联 CSS 非常适合大多数可应用于键值对的样式属性，但它并不能完全替代专用样式表。
EDIT:
编辑：
There are experimental objects available in certain browsers (Chrome 9+, IE 10+, Firefox 6+) that allow you to add event listeners when media queries on the document change, such as MediaQueryList.
在某些浏览器（Chrome 9+、IE 10+、Firefox 6+）中提供了实验性对象，允许您在文档上的媒体查询更改时添加事件侦听器，例如MediaQueryList。
There is a nascent React project called Radiumthat provides mixins for applying conditional styling based on the active media queries, using MediaQueryListunder the hood.
有一个名为Radium的新兴 React 项目，它提供了用于基于活动媒体查询应用条件样式的 mixin，在幕后使用MediaQueryList。
回答by Brigand
You can't do things like media queries and pseudo elements without a stylesheet. You can, however, access the information they're built on in JavaScript. For example, a naive implementation of a resize mixin:
如果没有样式表，您将无法执行媒体查询和伪元素之类的操作。但是，您可以访问它们在 JavaScript 中构建的信息。例如，一个 resize mixin 的简单实现：
var ResizeMixin = {
componentDidMount: function(){
window.addEventListener('resize', this._resize_mixin_callback);
},
_resize_mixin_callback: function(){
this.setState({
viewport: {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
});
},
componentWillUnmount: function(){
window.removeEventListener('resize', this._resize_mixin_callback);
}
};
You could then include that in your component, and have a render that looks like this:
然后你可以将它包含在你的组件中，并有一个看起来像这样的渲染：
render: function(){
var style;
if (this.state.viewport.width > 900) {
style = {width: '45%', margin: '2.5%'};
}
else {
style = {width: '100%', margin: '0'};
}
...
}
I'm not sure this is a good idea, but it can be done.
我不确定这是个好主意，但可以做到。
By 'naive implementation' I mean it has performance problems. addEventListener is actually pretty heavy, so you want to wrap that in a simple js event emitter. You can also have only one instance of the viewport object to save some GC pressure. And you want to throttle the event because browsers will emit it very fast when dragging the window.
“天真的实现”是指它存在性能问题。addEventListener 实际上很重，所以你想把它包装在一个简单的 js 事件发射器中。您也可以只有一个视口对象实例来节省一些 GC 压力。并且您想限制该事件，因为浏览器在拖动窗口时会非常快地发出它。
As with all good abstractions, you can make these optimizations when you have spare time, and you don't need to modify the components using it.
与所有好的抽象一样，您可以在空闲时间进行这些优化，并且不需要修改使用它的组件。
回答by Kat
React-Responsivewill let you use a certain use-case of media queries.
React-Responsive将让您使用媒体查询的特定用例。
It lets you wrap react element elements with media specifications. The wrapped elements will be rendered only if they media specification is met. It's not a general-purpose solution because it doesn't let you add arbitrary css properties.
它允许您使用媒体规范包装反应元素元素。包装的元素只有在满足媒体规范时才会呈现。这不是通用解决方案，因为它不允许您添加任意 css 属性。
