条件付きレンダリングReduxとReact

Question

onClickというイベントを持つComponentがあります。このイベントは、私のglobal stateの一部をbooleanからtrueに設定します。これに応じて、どうすればbooleanレンダリング/非表示component？

私が何か書くことができ

<ParentCompononet 

    conditionalRendering(props) { 
     if(props.boolean) { 
      <ConditionalComponent /> 
     } else { 
      null 
     } 

    render() { 
     return (
      { conditionalRendering } 
     ) 
/> 

わからないことが正しい方法であるかどう

Answer 1

あなたconnect小道具へのブール値は、あなたはこのような何かを行うことができたら（擬似コードを！）：

const MyComponent = (props) => { 

    return { props.myBool && <MyChildComponent /> }; 

} 

または少し冗長：

const MyComponent = (props) => { 

    if (props.myBool) { 
     return <MyChildComponent />; 
    } else { 
     return null; 
    }  
} 

Answer 2

あなたはreactly reduxを適切に設定していると仮定すると、これはあなたが探しているものかもしれません。

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import * as Actions from '../../actions'; 



class User extends Component { 
    constructor(props) { 
     super(props); 

    } 

    click=()=>{ 
    this.props.actions.someEvent(); 
    } 

    render() { 

     return (
     <div> 
     (this.props.useravailable) ? <div>Hello world!</div> : <div/> 
     </div> 
    ); 
    } 
} 

Login.PropTypes = { 
    useravailable: PropTypes.bool.isRequired, 
    actions: PropTypes.object.isRequired 
} 

let mapStateToProps = (state,props) => { 
    return { 
    useravailable: state.user 
    } 
} 

let mapDispatchToProps = (dispatch) => { 
    return { 
    actions:bindActionCreators(Actions,dispatch) 
    }; 
} 

export default connect(mapStateToProps,mapDispatchToProps)(User);