在React

Question

我有一个父ButtonGroup组件，可以接收像this.props.children这样的子项。我传递给它的孩子是btnItem组件，它呈现出单个按钮。我们可以根据需要添加这些按钮。

//ButtonGroup Component

render() {
  return (
    <div>
      {this.props.children}
    </div>
  )
}

//buttonItem component: 

render() {
  return (
    <button disabled={this.props.disabled}>{this.props.caption}</button>
  )
}

//final render
<ButtonGroupComponent>
  <buttonItem caption="Nothing"/>
  <buttonItem caption="Something" disabled={true}/>
  <buttonItem caption="Refresh"/>
</ButtonGroupComponent>

^这是我从上面的代码中得到的。

我想要实现的是一种方式，我可以设置第一个和最后一个项目的边框半径，以便它们具有弯曲的边框。这必须是动态的，因为这个样式将取决于我们渲染的子buttonItem的数量。

我还应该提一下，我正在为每个按钮的CSS使用样式组件。

Answer 1

你可以在这里使用第一个和最后一个子css伪选择器。在您的组件中编写以下代码。

const ButtonGroupComponent= styled.div`
     button:first-child {
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
     }
     button:last-child {
         border-top-right-radius: 3px;
         border-bottom-right-radius: 3px;
     }
 `;

并像这样渲染函数

<ButtonGroupComponent>
  <buttonItem caption="Nothing"/>
  <buttonItem caption="Something" disabled={true}/>
  <buttonItem caption="Refresh"/>
</ButtonGroupComponent>

查看此demo

Answer 2

我在这里附上一个快速示例，我还没有测试它，但你可以试试：

const StyledButtonGroupComponent = styled(
     ({ willBeStyled, children, ...rest }) =>(
       <ButtonGroupComponent {...rest}>{children}</ButtonGroupComponent>
    ))`

    ${props => React.Children.toArray(props.children).length <= props.willBeStyled && `
     ...first child, last child styles go here...
    `}

    `