条件渲染 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 props 的布尔值，你可以做这样的事情：

const MyComponent = (props) => {
   return { props.myBool && <MyChildComponent /> };
}

或稍微啰嗦：

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

Answer 2

假设你已经正确配置了react-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);