javascript - 在ReactJs中实现ButtonToggleGroupComponent

我是新来的人，我想实现一个简单的ButtonToggleComponent和ButtonToggleGroupComponent。第二个组件包含n个ButtonToggleComponents，并具有一些逻辑。 ButtonToggleGroupComponent应该只允许同时激活一个ButtonToggleComponent，就像无线电控件的行为一样。同样，第一个和最后一个ButtonToggleComponent不应像我用于此组件的material-button那样在一侧具有圆角。

我的方法：

ButtonToggleComponent：

class ButtonToggleComponent extends React.Component {
    _label;
    _isFirst;
    _isLast;
    _classes;

    constructor({label, isFirst, isLast, classes}) {
        super();
        this._label = label;
        this._isFirst = isFirst;
        this._isLast = isLast;
        this._classes = classes;
    }

    get Label() {
        return this._label;
    }

    get IsFirst() {
        return this._isFirst;
    }

    get IsLast() {
        return this._isLast;;
    }

    get Classes() {
        return this._classes;
    }

    getCorrectCornerStyles() {
        if(this.IsFirst) {
            return {
                borderTopRightRadius: "0",
                borderBottomRightRadius: "0"
            }
        }
        else if(this.IsLast) {
            return {
                borderBottomLeftRadius: "0",
                borderTopLeftRadius: "0"
            }
        }
    }

    render() {
        return <Button raised color="primary" className="buttonToggle" style={this.getCorrectCornerStyles()}>
            <label className={this.Classes.buttonLabel}>{this.Label}</label>
      </Button>
    }
}

ButtonToggleGroupComponent：

class ButtonToggleGroupComponent extends React.Component {
    _buttonToggleChildren;
    _classes;

    constructor({ children, classes }) {
        super();
        this._buttonToggleChildren = children;
        this._classes = classes;
    }

    get ButtonToggleChildren() {
        return this._buttonToggleChildren;
    }

    get Classes() {
        return this._classes;
    }

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

如何使用：

<ButtonToggleGroupComponent>
          <ButtonToggleComponent isFirst={true} label="a" />
          <ButtonToggleComponent isLast={true} label="s" />
        </ButtonToggleGroupComponent>

显示：



如您所见，我将两个道具（isFirst，isLast）传递给ButtonToggleComponent，可以使用它们对角应用正确的样式，但是我认为这不是最干净的解决方案，或者说不是最佳实践解决方案。不通过道具怎么办？因为它是我必须应用这些样式的第一个和最后一个ButtonToggleGroupComponent。还是我应该完全不同？

另外，我也不知道如何实现始终只有一个ButtonToggleComponent处于活动状态的功能。一些背景知识：这是一个新项目，在开始状态管理（我们要使用redux）并创建类似的操作和东西之前，我想先设计组件。因此，如果此组件可以执行此功能，那就是只有ButtonToggleComponent可以同时处于活动状态而没有状态，这是很好的。反正有可能吗？

如果您发现其他可以做得更好的事情，请随时提及。这对我来说非常有价值。

最佳答案

您可以在容器中使用React.Children，它将允许您为容器中的组件设置样式，您仍然需要不需要手动输入的prop。这也将允许您向父类添加类似其他道具的自定义项，并且可以将其内部传递给所有按钮。

就像是：

    {React.Children.map(this.props.children, (child, index) => (
      if(index === 0) {
        React.cloneElement(
          child,
          {
            isFirst
          }
        )
      }
      else if (index === React.Children.count - 1) {
        // Same as above but with isLast
      }
      else {
        React.cloneElement(child);
      }
    ))}

编辑：尽管您尝试执行的操作有些冗长，所以最好使用CSS属性（:last-child和：first-child）来执行此操作。