コンポーネントのレンダリング関数内で反復するコンポーネント内の列のアクティブなクラスを設定する

Question

簡単に言えば、コンポーネントのレンダリング機能でアクティブなクラスを切り替える、データセット（列）を反復処理したいと思います。私のコードは、各列にアクティブなクラスを追加しますが、ただ1つではなく、すべての列にそれを加えることになります。

助けがあれば助かります。

import React from "react"; 


import Utils from "#/utils/Utils"; 
import SVGInline from "react-svg-inline"; 
import {houseSvg, businessSvg, eventsSvg, petsSvg, healthSvg, webDesignSvg, creativeSvg} from '#/utils/Svg'; 

import sass from './categoriesiconslist.scss'; 
import CategoriesManager from "#/ui/categories/CategoriesManager"; 

export default class CategoriesIconsList extends React.Component { 
    static defaultProps = { 
     layout: "horizontal", 
     className: null, 
     containerFluid: true, 
     styles: {}, 
     enableColClick: false, 
     colClick:() => {} 
    }; 

    state = { 
     activeCol: false 
    }; 

    constructor() { 
     super(); 
    }; 

    onColClick(e, component, data) { 
     e.preventDefault(); 


     component.setState({ 
      activeCol: true 
     }) 
    } 

    render() { 
     return (
      <section class={`categories-list-icons ${this.props.layout} ${this.props.className ? this.props.className : '' }`} style={this.props.styles}> 
       {this.props.title ? 
        <div class="base-title"> 
         <h2>{this.props.title}</h2> 
        </div> : '' 
       } 
       <div class={ 
        ` ${this.props.containerFluid ? "container-fluid" : "container"} 
         ${this.props.layout == "horizontal" ? "seven-cols" : "single-col"} 
        `} > 
        { 
         Object.keys(CategoriesManager.CATEGORIES_LIST).map((value, idx) => { 
          var data = CategoriesManager.CATEGORIES_LIST[value]; 

          return (
           <div 
            class={"col " + (this.props.layout == "horizontal" ? "col-sm-1 " : " ") + (this.state.activeCol ? 'active ' : ' ')} 
            onClick={ this.props.enableColClick ? (e) => { this.onColClick(e, this, data) } : '' } 
            key={idx} 
           > 
             {data.icon} 
            <div class="txt">{data.title}</div> 
           </div> 
          ) 
         }) 
        } 
       </div> 
      </section> 
     ) 
    }; 
} 

Answer 1

さてあなたはブールアップトップとしてactiveCol状態を持っており、すべての列は、その状態から読んでいるので、彼らはすべてのアクティブかのどちらかです。列コンポーネントを作成してみると、それぞれのコンポーネント内で独自のactiveCol状態を維持できます。