react写组件方式

import React, { useMemo } from 'react';
import classNames from 'classnames';

interface Props {
  direction?: string;
}

const ContainerLayout: React.FC<Props> = (props) => {
  const { direction } = props;

  const isVertical = useMemo(() => {
    if (direction === 'vertical') {
      return true;
    } else if (direction === 'horizontal') {
      return false;
    }
  }, []);

  return (
    <>
      <article
        className={classNames(
          'vint-container',
          isVertical ? 'is-vertical' : ''
        )}
      >
        {props.children}
      </article>
    </>
  );
};

ContainerLayout.defaultProps = {
  direction: '',
};

export default ContainerLayout;