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组件中，我需要一个项目的onClick处理程序，但只有当断点很小，而不是中等或大时。

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

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

使用Styled Components来处理断点时，如果当前断点当前大小很小并且只使用onClick处理程序，如何通知我的React Component？

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。然后单击处理程序将检查此布尔值。如果是假的，它会立即返回。

请在此处使用某种去抖功能进行调整大小事件。

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

1 个答案: