在react中映射数据时隔离函数

不是很漂亮,但像这样的东西应该管用:

constructor(props) {
    super(props);
    this.state = {
        open: {},
    };
}
handleClick = (idx) => {
  this.setState(state => ({open: { [idx]: !state.open[idx]} }))
}

// in render
{LicenseItems.map((item, index) => (
    <div key={index}>
        <ListItem 
            divider 
            button
            onClick={() => this.handleClick(index)}>
            <ListItemText primary={<CMLabel>{item.accordion_name}</CMLabel>}/>
        </ListItem> 
        <Collapse
            in={!this.state.open[index]} 
            timeout="auto" 
            unmountOnExit>
            {item.content}
        </Collapse> 
    </div>
))}

最好创建单独的组件,它们有自己的 open 状态。

您应该为此创建两个组件:

手风琴.js

import React from 'react'

import Accordion from './Accordion'

const Accordions = props => {
  return (
    props.LicenseItems.map((item, index) => (
      <Accordion key={index} item={item} />
    ))
  );
}

export default Accordions;

手风琴

import React, { Component } from 'react'

class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = {
        open: true,
    };
  }

  handleClick = () => { this.setState({ open: !this.state.open }); };

  render() {
    return (
     <div>
        <ListItem 
            divider 
            button
            onClick={this.handleClick}>
            <ListItemText primary={<CMLabel>{this.props.item.accordion_name}</CMLabel>}/>
        </ListItem> 
        <Collapse
            in={!this.state.open} 
            timeout="auto" 
            unmountOnExit>
            {this.props.item.content}
        </Collapse> 
      </div>
    )
  }
}

export default Accordion;