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 map和css类切换

2 个答案: