如何使用带样式的组件在条件下将边距应用于 div 并做出反应？

Question

我想使用 react 和 typescript 根据样式组件的道具应用边距。下面是我的代码，function Parent() {    return (        <Child margin='variant'/>    );}interface Props {    margin?: any;}function Child({margin}: Props) {    return (        <Wrapper margin={margin}/>    );}const Wrapper = div<{margin: any;}>`   margin: 0 4px; //usually a margin of 0 4px should be used. if this child is called from parent    //component then it should use 0 4px 4px 8px;`;该子组件在两个组件中使用，一个在父组件中，另一个在子组件中。当从父组件调用此子组件时，它应该使用 0 4px 4px 8px 的边距，如果不是，则应该使用 0 4px 的边距。我该如何修改上面的代码。有人可以帮我解决这个问题吗？谢谢。

Answer 1

你需要传递道具

我想使用 react 和 typescript 根据样式组件的道具应用边距。

下面是我的代码，

function Parent() {

    return (

        <Child margin='variant'/>

    );

}

interface Props {

    margin?: any;

}

function Child({margin}: Props) {

    return (

        <Wrapper margin={margin}/>

    );

}

const Wrapper = div<{margin: any;}>`

   margin: 0 4px; //usually a margin of 0 4px should be used. if this child is called from parent 

   //component then it should use 0 4px 4px 8px;

`;

该子组件在两个组件中使用，一个在父组件中，另一个在子组件中。

当从父组件调用此子组件时，它应该使用 0 4px 4px 8px 的边距，如果不是，则应该使用 0 4px 的边距。

我该如何修改上面的代码。有人可以帮我解决这个问题吗？谢谢。