Question

我想在应用宽度时添加一个媒体查询，以检查屏幕的大小。

这是我的代码：

const myConfig = {
  nodeHighlightBehavior: true,
  node: {
    color: "lightgreen",
    size: 120,
    highlightStrokeColor: "blue",
    labelProperty: "name"
  },
  link: {
    highlightColor: "lightblue"
  },
  @media (max-width: 960px){
  width: window.innerWidth * 0.9
};

错误：第76行：解析错误：阶段2装饰器不允许对象文字属性装饰器

Answer 1

媒体查询是CSS属性，您将其用作JavaScript属性。

您要么需要在CSS上编写媒体查询，然后将其应用于某个组件，也许是一个全局包装器组件。

或者您使用JavaScript获取页面的宽度，然后将其设置在myConfig上，为此，您可以使用诸如offsetWidth之类的DOM方法

const documentWidth = document.body.offsetWidth

...
},
width: documentWidth < 960 ? window.innerWidth * 0.9 : window.innerWidth * 0.6

Answer 2

您必须从file.css导入该文件，因为CSS in JS不支持它，然后使用className。

否则，您可以使用react-responsive

Answer 3

您可以创建一个高阶组件（HOC）来解决此问题。使用类似react-media library的东西（您需要安装react-media库）可能会具有以下内容：

import React from 'react';
import Media from 'react-media';

class OriginalComponent extends React.Component {
  render() {
    const myConfig = {
      nodeHighlightBehavior: true,
      node: {
        color: "lightgreen",
        size: 120,
        highlightStrokeColor: "blue",
        labelProperty: "name"
      },
      link: {
        highlightColor: "lightblue"
      }
    }
    if (this.props.small) {
      myConfig.width = window.innerWidth * 0.9
    }
    return (
      <div style={myConfig} />
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Media query="(max-width: 960px)">
          {matches =>
            <OriginalComponent small={matches} />
          }
        </Media>
      </div>
    );
  }
}

但是拥有HOC可能会对您的使用造成一些影响。

媒体查询ReactJs组件

3 个答案: