reactjsは

Question

 <div> 
    {this.props.data.map((res, index) => { 
     return (<div key={index}> 
     <div> 
      <span>{response.testData}</span> 
<a key={index} onClick={() => this.showExtraLine(index)}><span className={`btn-green ${this.state.showExtraLine ? 'active' : ''}`}></span></a> 
      { this.state.showExtraLine ? <span> 
      {res.abc[0].def} 
      </span> : '' } 
     </div> 
     </div> 
    ); 
    })} 
    </div> 
showExtraLine(e){ 
    this.setState({ 
     showExtraLine: !this.state. showExtraLine, 
    }); 
    } 

はアンカーのクリックの一部{[0] .defファイルres.abc}を切り替えるために必要があるマップやCSSクラストグル今それすべての行を隠している..どのようにCSSのトグルを扱うには、マップを使用して？

Answer 1

私はあなたが単一の状態変数を使用して、その変数の状態に基づいて<span>を印刷している、問題はあなたの状態変数であると思います。 代わりに、showExtraLine（）関数のshowExtraLine = []、 という状態の配列を使用すると、indexを渡しています。そのインデックスを使用して、その要素だけを切り替えます。

それが動作するはずです、これを試してみてください：

{this.props.data.map((res, index) => { 
    return (<div key={index}> 
    <div> 
     <span>{response.testData}</span> 
     <a key={index} onClick={() => this.showExtraLine(index)}><span className={`btn-green ${!this.state.showExtraLine[index] ? 'active' : ''}`}></span></a> 
     { !this.state.showExtraLine[index] ? 
     <span>{res.abc[0].def}</span> 
     : '' } 
    </div> 
    </div> 
); 
})} 

showExtraLine(index){ 
    let showExtraLine = this.state.showExtraLine.slice(0); 
    showExtraLine[index] = !showExtraLine[index]; 
    this.setState({ 
     showExtraLine: showExtraLine, 
    }); 
} 

Answer 2

現在、コンポーネント内のすべてのマップされた要素の状態が維持されているため、すべて同じ値を参照しています。代わりに、マップされた各要素を独自の状態で個別にレンダリングするために使用されるコンポーネントを作成する必要があります。

class Parent extends React.Component { 
    render() { 
    return (
     <div> 
     {this.props.data.map((res, index) => <Child key={index} {...res} />)} 
     </div> 
    ); 
    } 
} 

class Child extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     showExtraLine: false 
    }; 
    this.showExtraLine = this.showExtraLine.bind(this); 
    } 

    render() { 
    return (
     <div> 
     <div> 
      <span>{this.props.testData}</span> 
      <a key={index} onClick={this.showExtraLine}> 
      <span className={`btn-green ${this.state.showExtraLine ? 'active' : ''}`}></span> 
      </a> 
      { this.state.showExtraLine ? <span>{this.props.abc[0].def}</span> : '' } 
     </div> 
     </div> 
    ); 
    } 

    showExtraLine(e){ 
    this.setState({ 
     showExtraLine: !this.state.showExtraLine 
    }); 
    } 
}