使用样式的组件，如何仅将样式应用于小型设备

Question

我的样式组件主题当前包括：

const breakpoints = {
  medium: '640px',
  large: '1080px',
};
const MyContainer = styled.div`
  // Default mobile stylings
  ${({ theme }) => theme.media.medium`
     // CSS goes here
  `}
  ${({ theme }) => theme.media.large`
     // CSS goes here
  `}
`;

在我的React组件中，我需要一个物品的单击处理程序，但仅当断点很小，中等或大型时。

在我的反应组件中，由于某种原因，我无法弄清楚...

const MyC = class extends React.Component {
  render() {
    console.log(this.props.theme);
    ....
  }
};

在使用样式的组件处理断点时，如果当前的断点当前大小很小，并且仅使用OnClick Handler？

Answer 1

您需要使用JavaScript处理此操作。将其添加到您的组件中：

isEnabled = true;
calcButtonState = () => {
  if(window.innerWidth < breakpoints.medium) {
    this.isEnabled = false;
  } else {
    this.isEnabled = true;
  }    
}
handleButtonClick = () => {
   if(this.isEnabled === false) {
     return;
   }
}
componentDidMount() {
  this.calcButtonState();
  window.addEventListener('resize', this.calcButtonState);
}
componentWillUnmount() {
  window.removeEventListener('resize', this.calcButtonState);
}

如果您的窗口大于中等，则基本上要做的是将布尔值设置为true，如果它较小，则将其设置为false。您单击处理程序将检查此布尔值。如果是错误的，它将立即返回。

也请在此处使用某种访问功能进行调整大小。