1

我正在使用 ReactJS 和 npm 模块“react-media-query-hoc”,当我使用功能组件导出它们时一切都很好:withMedia()。现在我需要使用一个类组件,但我做得不对。这来自“react-media-query-hoc”文档:

import { withMedia } from 'react-media-query-hoc'; 
const MyComponent = ({ media, ...props}) => (
  if(media.tablet || media.mobile) {
    ..
    return (
      <div>
        Mobile and Tablet View
      </div>
    )
  }

  return (
    <div>
      Other View
    </div>
  )
);

export const BaseMyComponent = MyComponent;
export default withMedia(MyComponent);

我需要将其转换为类组件,请一些帮助会很棒:)

https://www.npmjs.com/package/react-media-query-hoc

4

1 回答 1

3

它应该是这样的:

import { withMedia } from 'react-media-query-hoc'; 
import React from 'react';

class MyComponent extends React.Component {

    render(){
        if(this.props.media.tablet || this.props.media.mobile) {
            ...
            return (
                <div>
                    Mobile and Tablet View
                </div>
            )
        }

        return (
            <div>
               Other View
            </div>
        )           
    }
}

export const BaseMyComponent = MyComponent;
export default withMedia(MyComponent);
于 2018-06-21T20:37:14.710 回答