Question

我有一个简单的部分，我想在其中动态更改宽度

这是部分

<div className="form-control">
            <Formats>
                {styles.map(style => <ButtonStyled type="button" active={style.id === styleId} onClick={() => setStyleId(style.id)} key={`button-${style.name}`}>{style.name}</ButtonStyled>)}
                {activeStyle && <FormatsContent>
                    <FormatsDescription>{activeStyle.desciption}</FormatsDescription>
                    <Proportions>
                        {activeStyle.proportions.map(x => <Proportion onClick={() => setProportion(x.proportion)} active={proportion === x.proportion} width={x.width} height={x.height} key={`proportion-${x.proportion}`}>{x.proportionLabel}</Proportion>)}
                    </Proportions> 
                </FormatsContent>}
            </Formats>
        </div>

这是样式

const Formats = styled.div`
    margin-left: 0px;
    padding:12px;
    background-color: ${gray.brightest};
    border-radius: 20px;
    width: 100%;
    & select {
    height: 31px;
    padding: 0;
    margin-left: 12px;
    }
`;

现在我想添加道具来检查宽度是否已满isFullWidth:true/false

以及使用样式的方式

   const Formats = styled.div`
    margin-left: 0px;
    padding:12px;
    background-color: ${gray.brightest};
    border-radius: 20px;
    width: ${props => props.isFullWidth ? '100%' : '59%'}
    & select {
    height: 31px;
    padding: 0;
    margin-left: 12px;
    }
`;

要实现自己的目标，我需要更改什么？

Answer 1

“格式”组件应具有isFullWidth道具，并保留true或false作为值，如下所示：

下面的示例将给出100%的宽度

<Format isFullWidth ={true}>

</Format>

这将给出59%的宽度

<Format isFullWidth ={false}>

</Format>

Answer 2

我认为将prop传递给组件并保持您发布的最新样式就足够了：

应该是

<Formats isFullWidth>
...
</Formats>

编辑：道具名称错误

如何在样式反应中添加道具？

2 个答案: