Question

我正在使用React和styled-components版本的^4.3.2 npm软件包。我在文件B中使用的组件Card与as="aside"道具一起使用，但是这没有用，因为最终结果没有我应用的任何样式。如果删除withHOC，则该组件将正常工作，并且不使用styled(Card)(composed)。我不确定为什么会这样，但是我读到，将样式化的组件包装在HOC中时，as需要使用forwardedAs进行传递。但我不确定forwardedAs放在哪里。问题是我在as中看不到withHOC道具，因此即使使用forwardedAs也无法手动传递。有什么解决办法吗？

file A:

import { display } from 'styled-system';

const element = props => {
  return (
  <div
    className={props.className}
  >
    {props.children}
  </div>
  )
}


const Card = styled(element)`
${display}
`

const withHOC = WrappedComponent => ({ hide, show, ...props }) => {
    // do something
    return shouldRender ? <WrappedComponent {...props} /> : null;
};


export default withHOC(Card);

---------
file B

import styled from 'styled-components';
import { Card } from 'fileA';
import { variant, fontFamily, compose } from 'styled-system';
import styled from 'styled-components';

const cardVariants = variant({
  scale: 'borders',
  prop: 'variant'
});
const composed = compose(
  cardVariants,
  fontFamily
);

const MyCard = styled(Card)(composed);


<MyCard as="aside" display="flex" />

如何通过HOC使用通过样式的组件？

0 个答案: