javascript - 连接到 Redux store 的 React 组件的递归渲染

标签 javascript reactjs redux react-redux

是否可以递归渲染连接到 Redux store 的 React 组件?

示例(在我的例子中,没有机会进行无限组件渲染循环):

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)

我看到我可以在组件中渲染组件,但是嵌套组件没有连接到商店,而且我没有必需的 this.props.data

是否有机会将嵌套组件连接到商店?

最佳答案

尝试呈现已连接的 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;

关于javascript - 连接到 Redux store 的 React 组件的递归渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50854451/

相关文章:

reactjs - 为 `Field` redux 组件构建高阶组件

reactjs - 有没有办法速记 useSelector 而不是导致不必要的渲染?

javascript - 什么是延迟api调用的好方法?

javascript - GraphQL 突变仅返回一个结果

javascript - 运行 --eval mongodb 命令时出错

javascript - 使用 React Router 4.2 渲染侧边栏和其他组件

javascript - 将 Axios Promise 转换为常规 JSON 数组

reactjs - 导出接口(interface)和类扩展 Component/PureComponent

javascript - 使用 $bindTo 两次时遇到问题

JavaScript 代码返回 NaN 而不是数值