连接到Redux存储的React组件的递归呈现

Question

Is it possible to recursive render React component connected to Redux store?

Example (in my case there is no chance to do infinite component rendering loop):

class Container extends Component {
    render (){
        return (
            <div>
                {this.props.data}
                {this.props.dataKey ? <Container dataKey={'123'} /> : null}
            </div>
    }
}

const mapStateToProps = (state, props) => {
    return {
        data: getDataFromStore(state, props.dataKey}
    }
}

export default connect(mapStateToProps)(Container)

I saw that i can render component in component, but nested component have not connection to the store and hance i do not have required this.props.data .

Is any chance to get nested component connected to the store?

Answer 1

Try to render already connected Container :

class Container extends Component {
    render (){
        return (
            <div>
                {this.props.data}
                {this.props.dataKey ? <ConnectedContainer dataKey={'123'} /> : null}
            </div>
        );
    }
}

const mapStateToProps = (state, props) => {
    return {
        data: getDataFromStore(state, props.dataKey}
    }
}

const ConnectedContainer = connect(mapStateToProps)(Container);

export default ConnectedContainer;