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

Question

我非常喜欢React中的内联CSS模式(视频),我正在考虑使用它.但是我有一个类似于这个的问题.

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

Answer 1

你不能.某些CSS功能(如@media查询)必须在样式表的声明块中定义.

虽然内联CSS非常适合可以应用于键值对的大多数样式属性,但它并不是专用样式表的完全替代品.

编辑:

某些浏览器(Chrome 9 +,IE 10 +,Firefox 6+)中提供了实验对象,允许您在文档上的媒体查询发生更改时添加事件侦听器,例如MediaQueryList.

有一个名为Radium的新生React项目提供了mixins,用于根据活动媒体查询应用条件样式,使用MediaQueryList引擎盖.

Answer 2

没有样式表,你不能做媒体查询和伪元素之类的事情.但是,您可以访问JavaScript中构建的信息.例如,调整大小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);
    }
};

然后,您可以将其包含在组件中,并具有如下所示的渲染:

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压力.并且您希望限制事件,因为浏览器在拖动窗口时会非常快速地发出事件.

与所有良好的抽象一样,您可以在空闲时进行这些优化,而无需使用它来修改组件.

Answer 3

React-Responsive将让您使用特定的媒体查询用例。

它使您可以使用媒体规范包装反应元素元素。包装的元素只有在符合媒体规范的情况下才会呈现。这不是通用解决方案，因为它不允许您添加任意的CSS属性。