ReactJsでButtonToggleGroupComponentを実装

Question

私は反応が非常に新しいので、単純なButtonToggleComponentとButtonToggleGroupComponentを実装したいと思います。 2番目のコンポーネントは、ButtonToggleComponentsの量がnであり、いくつかのロジックを持っています。 ButtonToggleGroupComponentは、ラジオコントロールの振る舞いと同じように、1つのButtonToggleComponentだけが同時にアクティブになるようにする必要があります。また、最初の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> 

ディスプレイ：

あなたは私がコーナーの正しいスタイルを適用することが可能なButtonToggleComponentまで2つの小道具（isFirst、にisLastを）渡す見ることができるように、しかし、私はこれが一番クリーンな解決策ではない、つまりベストプラクティスの解決策ではないと思います。どのように私は小道具を渡すことなくこれを行うことができますか？ ButtonToggleGroupComponentの最初と最後のたびに、これらのスタイルを適用する必要があるからです。それとも私はこれをまったく違うのですか？

また、私はどのようにButtonToggleComponentを常にアクティブにできるだけの機能を実装するのか分かりません。ちょっとした背景：これは新しいプロジェクトです。私が状態管理から始めて（私たちはreduxを使いたい）、アクションやそのようなものを作成する前に、コンポーネントを設計する必要があります。したがって、このコンポーネントがこの機能を実行して、同時にButtonToggleComponentだけが状態なしでアクティブになることができれば、いいでしょう。これはとにかく可能ですか？

あなたがもっとうまくいく可能性があることにお気づきならば、それを言いたいことは自由にしてください。それは私にとって非常に貴重です。

Answer 1

React.Childrenをコンテナに使用すると、コンテナ内のコンポーネントのスタイルを設定できるようになりますが、手動で入力する必要のないプロップが必要になります。これにより、他の小道具のようなカスタマイズを親クラスに追加することができ、それらを内部的にすべてのボタンに渡すことができます。

{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プロパティ（first-child:last-childと）を使用した方がよいかもしれませんが、あなたがやろうとしているもののために少し冗長だような

何か。