javascript - 在 React 类组件中插入 Props

Question

我正在使用 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

标签： javascriptreactjsmedia-queries

Answer 1

它应该是这样的：

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);