Question

我有一个组件：

class PaddingStyle extends Component {
    constructor( props ) {
        super( ...arguments )
    }

    render() {
        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props.attributes; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
    }
}


export default PaddingStyle;

在另一个文件中，我试图将组件返回的内容传递给另一个组件的内联样式：

import PaddingStyle from '../../components/padding/style';

<div 
  style={{
   padding: <PaddingStyle paddingTop={ paddingTop } paddingRight={ paddingRight } paddingBottom={ paddingBottom } paddingLeft={ paddingLeft } />,
  }}
>
</div>

我正在使用填充组件，因为我必须在多个位置添加样式。有更好的方法吗？

更新

我找到了解决方法

export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}

Answer 1

我不明白为什么您需要创建一个类组件来设置填充。您可以移动

const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props;
const top = paddingTop ? `${paddingTop}px` : 0;
const right = paddingRight ? `${paddingRight}px` : 0;
const bottom = paddingBottom ? `${paddingBottom}px` : 0;
const left = paddingLeft ? `${paddingLeft}px` : 0;

进入第二个组件，而无需创建单独的类组件来仅用于设置填充。然后，您可以直接使用上述变量直接设置填充。

<div 
  style={{
   padding: `${top} ${right} ${bottom} ${left}`,
  }}
>
</div

Answer 2

这有效：

export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}

它可以在任何组件中用作paddingStyle( props )。

内联样式的React Use组件

2 个答案: