javascript - 在 ReactJs 中实现 ButtonToggleGroupComponent

Question

我对 React 很陌生，我想实现一个简单的 ButtonToggleComponent 和 ButtonToggleGroupComponent。第二个组件包含 n 个 ButtonToggleComponents 并具有一些逻辑。 ButtonToggleGroupComponent 应该只允许一个 ButtonToggleComponent 同时处于事件状态，就像单选控件的行为一样。此外，第一个和最后一个 ButtonToggleComponent 的一侧不应有圆 Angular ，如 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，我可以使用它们为 Angular 应用正确的样式，但我认为这不是最干净的解决方案，或者换句话说，不是最佳实践解决方案。我怎样才能在不传递 Prop 的情况下做到这一点？因为每次我都必须在第一个和最后一个 ButtonToggleGroupComponent 中应用这些样式。或者我应该做完全不同的事情？

此外，我不知道如何实现始终只有一个 ButtonToggleComponent 可以事件的功能。一点背景知识:这是一个新项目，我想在开始状态管理(我们想使用 redux)并创建操作和类似的东西之前先设计组件。因此，如果这个组件能够执行只有 ButtonToggleComponent 同时可以在没有状态的情况下处于事件状态的功能，那就太好了。这可能吗？

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

Answer 1

你可以在你的容器中使用React.Children，它将允许你设置容器中组件的样式，你仍然需要你不需要手动输入的 Prop 。这还允许您向父类添加其他 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 )来执行此操作。