Javascript 媒体查询组件

我想在react中添加一个媒体查询，以便在应用宽度之前检查屏幕大小

这是我的代码：

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装饰程序不允许对象文字属性装饰程序

---

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

您或者需要在CSS上编写媒体查询，并将其应用于一个组件，可能是一个全局包装器组件

或者使用JavaScript获取页面宽度，然后在myConfig上设置，为此，可以使用offsetWidth等DOM方法

const documentWidth = document.body.offsetWidth

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

const documentWidth=document.body.offsetWidth
...
},
宽度：文档宽度<960？window.innerWidth*0.9:window.innerWidth*0.6

您必须从file.css导入它，因为JS中的

css不支持它，然后使用
className

否则，您可以使用
react responsive
您可以创建一个高阶组件（HOC）来解决此问题。使用类似（您需要安装react媒体库）的工具可以实现以下功能：

从“React”导入React；
从“反应介质”导入介质；
类OriginalComponent扩展了React.Component{
render（）{
常量myConfig={
nodeHighlightBehavior:true，
节点：{
颜色：“浅绿色”，
尺寸：120，
highlightStrokeColor:“蓝色”，
labelProperty:“名称”
},
链接：{
highlightColor:“浅蓝色”
}
}
如果（这个。道具。小）{
myConfig.width=window.innerWidth*0.9
}
返回(
)
}
}
类应用程序扩展了React.Component{
render（）{
返回(
{匹配=>
}
);
}
}

但是对于你的使用来说，拥有一个HOC可能有点过头了。
Lol这甚至比不上js中的
css