は、IDを渡すにしてもでe.preventdefaultんし、私は私の行動mapdispatchtopropsにIDを渡すことができていますが、また、私はonclickのは、私はまた、クリックした上で要素にのみ解雇したいReduxの

Question

   `import React, { Component, PropTypes } from 'react'; 
        import { connect } from 'react-redux'; 
        import { itemsFetchData,toggleDiv } from 
         '../actions/sidenavaction'; 

       class SideNavItem extends Component { 
        componentDidMount() { 
       this.props.fetchData 
        ('http://58f5d2ccc9deb71200ceecef.mockapi.io/nav'); 
         } 


        render() { 

         var Nest=function(par) { 
          const numbers = par.itemized; 
          const listItems = numbers.map((number) => <li 
         key={number.sid}>{number.svalue}</li>); 
       return (<ul>{listItems}</ul>); 
        }; 



      if (this.props.hasErrored) { 
     return <p>Sorry! There was an error loading the items</p>; 
        } 

       if (this.props.isLoading) { 
     return <p>Loading…</p>; 
      } 

       return (
       <ul>{this.props.items.map((item) =>   
     <ul key={item.id} onClick= 
      {this.props.toggleDiv.bind(this,item.id)}><a href="#"> 
      {item.value}</a> 
      {item.sub && <div style={{display: this.props.hidden ? 'block' : 
      'none'}}><Nest itemized={item.sub} /></div>}   
       </ul>    
       )} 
        </ul> 
      );   
     } 
     } 

       const mapStateToProps = (state) => { 
      return { 
      items: state.items, 
     hasErrored: state.itemsHasErrored, 
      isLoading: state.itemsIsLoading, 
     hidden:state.toggleDivReducer.hidden 
        }; 
      }; 

        const mapDispatchToProps = (dispatch) => { 
       return { 
        fetchData: (url) => dispatch(itemsFetchData(url)), 
       toggleDiv: (id) => dispatch(toggleDiv(id)) 
     }; 
      }; 

       export default connect(mapStateToProps, mapDispatchToProps) 
       (SideNavItem);` 

を反応させます{私は、ネストされたリストが隠されていないリストを読み込むときので、切り替えることが、どこ隠された小道具を適用するために実施したがリンクをクリックする上で、私は彼らにOnload the nested links are also visible whereas it should be hidden

アクション `エクスポート機能toggleDiv（ID）を切り替えることができていています 返品{ タイプ： 'TOGGLE_DIV'、 id：id

     }; 
         }` 

減速 `エクスポート機能toggleDivReducer（状態= {隠さ： 真}、アクション）{ スイッチ（action.type）{

      case 'TOGGLE_DIV': 
         return Object.assign({}, state, {hidden: 
         !state.hidden}); 

          default: 
         return state; 

          } 

          } 

Answer 1

enter image description here実は私の理解では、私が使用したとき、私は推測間違っていました非表示の小道具は、アプリケーションを読み込むと動作しますが、私のクリックイベントはすべてのリンクで動作します。トグルが期待どおりに動作していません。 私の更新されたコードは

render() { 
    var Nest = function(par,leme) { 
    const numbers = par.itemized; 
    const listItems = numbers.map((number) => <li key={number.sid}>{number.svalue}</li>); 

    return (<ul>{listItems}</ul>); 
    }; 

    if (this.props.hasErrored) { 
    return <p>Sorry! There was an error loading the items</p>; 
    } 

    if (this.props.isLoading) { 
    return <p>Loading…</p>; 
    } 

    return (
    <ul> 
     {this.props.items.map((item) =>   
     <li key={item.id} onClick={this.props.toggleDiv.bind(this,item.id)}> 
      <a href="#">{item.value}</a> 
      {item.sub && <div hidden={this.props.hidden}><Nest itemized={item.sub} /></div>}   
     </li> 
    )} 
    </ul> 
);   
} 

クリックすると、ナビゲーションの両方のために解雇され