React中的内联CSS样式：如何实现媒体查询？

我很喜欢React中的inline CSS pattern（video），我正在考虑使用它。不过，我有一个类似this one的问题。React中的内联CSS样式：如何实现媒体查询？

如何使用React的内联CSS模式去实现应用程序的媒体查询。

来源

2015-02-09 Paulo

请具体说明您的问题，如果网站上有类似问题，请尝试在该问题上撰写评论，以便您能够得到答案，而且没有人会有时间浏览您的链接并总结，然后给出答案。 – Chella 2015-02-09 08:28:22

你不能。有一些CSS功能，如@media查询，必须在样式表的declaration block中定义。

尽管内联CSS适用于大多数可用于键值对的样式属性，但它并不完全替代专用样式表。

编辑：

有在某些浏览器（Chrome的9+，IE 10，Firefox的6+），允许您添加事件侦听器现有的实验对象时，媒体查询的文档的变化，如MediaQueryList。

有一个新生的React项目名为Radium，它提供了mixins，用于根据活动媒体查询应用条件样式，使用底层的MediaQueryList。

来源

2015-02-09 14:16:52

对于某些伪类也是如此。 – 2015-02-10 00:51:39

加1为镭。 – n1k1ch 2016-01-13 18:54:51

关于媒体查询API的当前状态http://caniuse.com/#search=matchMedia – 2016-04-18 17:56:56

你不能做像媒体查询和伪元素没有样式表的事情。但是，您可以访问它们在JavaScript中构建的信息。例如，一个天真的实现调整大小混入的：

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); 
    } 
};

然后，您可以包括在您的组件，并有呈现，看起来像这样：

render: function(){ 
    var style; 

    if (this.state.viewport.width > 900) { 
    style = {width: '45%', margin: '2.5%'}; 
    } 
    else { 
    style = {width: '100%', margin: '0'}; 
    } 
    ... 
}

我不知道这是一个好主意，但它可以完成。

'天真的执行'我的意思是它有性能问题。 addEventListener实际上很沉重，所以你想把它包装在一个简单的js事件发射器中。您也可以只有一个视口对象实例来保存一些GC压力。而且你想限制事件发生，因为浏览器在拖动窗口时会非常快地发出它。

就像所有抽象的抽象一样，当你有空闲时你可以进行这些优化，并且你不需要使用它来修改组件。

来源

2015-02-09 17:11:40 FakeRainBrigand

答案在这里：http：//stackoverflow.com/a/35075190/564872解释了这个问题的REDX风格的解决方案。 – Civilian 2016-03-25 22:16:52

This library将允许您使用某种媒体查询的用例。

它可以让你用媒体规范包装反应元素元素。只有符合媒体规范时，才会呈现包裹的元素。这不是一个通用的解决方案，因为它不允许添加任意的CSS属性。

来源

2017-08-13 02:29:51 Kat

请在链接中添加上下文。只包含多个链接的答案可能会被删除。 – 2017-08-13 04:18:44

尽管此链接可能会回答问题，但最好在此处包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/17017726） – 2017-08-13 04:23:33

感谢您的反馈:)增加了一个更详细的解释，说明它是如何工作的，以及它何时有用。 – Kat 2017-08-13 04:54:55

React中的内联CSS样式：如何实现媒体查询？

回答

相关问题