有條件的渲染Redux和反應

Question

我有一個Component與onClick事件。此事件設置在我的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

假設您已配置react-redux propely，這可能是您正在尋找的那個。

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);