react里面 内联css样式怎么样,React中的内联CSS样式：如何实现媒体查询？

你不能做像媒体查询和伪元素没有样式表的事情。但是，您可以访问它们在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压力。而且你想限制事件发生，因为浏览器在拖动窗口时会非常快地发出它。

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