我們的MyBox 包含了多個討論組的主題
當然 提供一個可以開關列表的功能是需要的
但是 這個是 array.map 出來的列表 控制開關的參數不會只有一個

所以 第一件事情 就是要把array.map 出來的object 先塞著預設要用的辨識值 像我就是塞了 Visible: false

<Table.Row>
  <Table.Cell colSpan='10' style={{borderTop:'1px solid lightgrey'}}>
    <h2 style={styles.discTitle}>
      {this.renderDiscName(_discItem.getIn(['0', 'DiscID']))}
    </h2>
    <Icon style={styles.discArrow} 
          color='grey' 
          name=
          {
            _discItem.getIn(['0', 'Visible']) == true ? 
            'chevron down':'chevron up'
          }
          size='large'
          onClick={() => this.props.onChangeDiscVisible(_discIndex, _discItem.getIn(['0', 'DiscID']))}>
    </Icon>
  </Table.Cell>
</Table.Row>

點擊事件

onClick={() => this.props.onChangeDiscVisible(_discIndex, _discItem.getIn(['0','DiscID']))}

連結到container

(dispatch) => ({
    onGetUserMyBox: (_compid, _userid, _token) => {
        dispatch(GetUserMyBox(_compid, _userid, _token))
    },
    onChangeDiscVisible: (_discindex, _discid) => {
        dispatch(ChangeDiscVisible(_discindex, _discid))
    },
    ...
})

再來是Action

export const ChangeDiscVisible = (_discindex, _discid) => {
	return (dispatch) => {
		dispatch({
			type: Change_MyBox_Disc_Visible,
			payload: {
				DiscIndex: _discindex,
				DiscID: _discid
			}
		});
	}
}

Reducer 修改 redux state tree

Change_MyBox_Disc_Visible: (state, {payload}) => {
    return state.map((_mybox_item, _mybox_index) => {
        if (_mybox_index === "MyBoxList"){
            return _mybox_item.map((_disc_item, _disc_index) => {
                if (_disc_index === payload.DiscIndex && _disc_item.getIn(['0', 'DiscID']) === payload.DiscID)
                {
                    return _disc_item.setIn(['0', 'Visible'], !_disc_item.getIn(['0', 'Visible']));
                }
                return _disc_item;
            });
            return _mybox_item;
        }
    });
}

OK 再來來看 開關套入動畫的方式

<Transition.Group animation='vertical flip' duration='500'>
  {
    this.props.AllDiscs.map(function(_disc, _index){
      if (_disc.getIn(['discussion_info', 'DiscType']) == 2) {
        return (
          this.props.GeneralDiscVisible &&
          <MenuItem key={_index}
                    style={styles.menuItem}
                    primaryText={_disc.getIn(['discussion_info','DiscName'])}
                    secondaryText={
                      _disc.getIn(['discussion_info', 'SubjCT']) == undefined ? "":_disc.getIn(['discussion_info', 'SubjCT']).toString()
                    }
          />
        )
      }
    }, this)
  }
</Transition.Group>