reactjs 映射和 css class 切换

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,
    });
  }

需要在单击锚点时切换 {res.abc[0].def} 部分 - 切换有效，但不确定如何处理仅切换相应的跨度 - 现在它隐藏了所有行..如何在使用 .map 时处理 css 切换？

Answer 1

现在您正在维护组件中所有映射元素的状态，因此它们都引用相同的值。您应该改为创建一个组件，该组件将用于单独呈现每个映射元素及其自己的状态。

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
    });
  }
}

Answer 2

我认为问题出在您的状态变量上，您使用的是单个状态变量并根据该变量的状态打印 <span>。而不是使用状态 showExtraLine = [] 中的数组，在您传递索引的 showExtraLine() 函数中，使用该索引仅切换该元素。

试试这个应该有效：

{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,
    });
 }

reactjs 映射和 css class 切换

reactjs map and css class toggle

reactjs

react-jsx