REACT JavaScriptカスタムクラス名の使い方は？

Question

REACTコンポーネントで使用するカスタムクラス名を作成しようとしています。私はmap関数を使って複数のコントロール要素を作成しています。これは私のエラー検証が正しいコントロールを強調表示するので、これはどのUnitSelectorを指定できるようにしたい。ここで

はレンダリングコードです：ここでは

units ? 
    units.map((unit, index) => { 

     return (
      <div> 
       <UnitSelector className={ this.state.errors.unit + index } 

は、検証コードです：

let errors = {}; 
    let errorFound = false; 
    let tempUnits = this.state.units; 

    //Can only add a new unit, if every Unit Selector has selected a unit. 
    for(let i = 0; i < tempUnits.length; i++) { 
     if(!tempUnits[i] || !tempUnits[i].number) { 
      errorFound = true; 
      let fieldName = "unit" + i; 
      errors[fieldName] = 'custom-error'; 
     } 
    } 

    if(!errorFound) tempUnits.push(); 

    this.setState({ units: tempUnits, errors: errors }); 

私はすべてがこの部分を除いて正常に動作していると信じています。私は一緒に行くことになった

  <UnitSelector className={ this.state.errors.unit + index } 

Answer 1

ソリューションは、それがマッピングされているとき、クラス名がUnitSelectorに適用されるように、ユニットにフィールドクラス名を適用することでした。

let tempUnits = []; 
    tempUnits.push({ className: "" }); 

    this.state = { 
     errors: {}, 
     units: tempUnits 
    }; 

今のレンダリングは次のようになります。

<UnitSelector className={ unit.className } 

検証コードは、このように変更されました。

addUnit() { 

    let errors = {}; 
    let errorFound = false; 
    let tempUnits = this.state.units; 

    //Can only add a new unit, if every Unit Selector has selected a unit. 
    for(let i = 0; i < tempUnits.length; i++) { 
     if(!tempUnits[i] || !tempUnits[i].number) { 
      errorFound = true; 
      tempUnits[i].className = 'custom-error'; 
     } 
     else { 
      //Clear this out to remove the custom error. 
      tempUnits[i].className = ""; 
     } 
    } 

    if(!errorFound) tempUnits.push({className: ""}); 

    this.setState({ units: tempUnits, errors: errors }); 

}