组件中的组件，React redux

Question

是否可以在组件中调用组件（如inception）

例子

内容.jsx

class Content extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch(fetchNav(this.props.match.params.tab));
    }

    componentDidUpdate(prevProps) {
        if(this.props.match.params.tab != prevProps.match.params.tab) {
            this.props.dispatch(fetchNav(this.props.match.params.tab));
        }
    }

    render() {
        const {nav, match} = this.props;
        let redirect = null;
        return (
            <div>
                <ul>
                    {nav.some((item, key) => {
                        if (this.props.location.pathname != (match.url + item.path)) {
                            redirect = <Redirect to={(match.url + item.path)} />;
                        }
                        return true;
                    })}
                    {redirect}
                    {nav.map((item, key) => {
                        return <li key={key}>
                            <Link to={match.url + item.path}>{item.name}</Link>
                        </li>;
                    })}
                    <Switch>
                        {nav.map((item, key) => {
                            return <Route key={key} path={`${match.url}/list/:tab`} component={Content} />;
                        })}
                    </Switch>
                </ul>
            </div>
        );
    }
}

const mapStateToProps = (state, props) => {
    const {fetchNav} = state;
    const {
        lastUpdated,
        isFetching,
        nav: nav
    } = fetchNav[props.match.params.tab] || {
        isFetching: true,
        nav: []
    };

    return {
        nav,
        isFetching,
        lastUpdated
    }
};

export default connect(mapStateToProps)(withStyles(appStyle)(Content));

实际上，当我这样做时，如果我的路由匹配并调用相同的“内容”组件，它会说：“this.props.dispatch is not a function”

你认为我需要创建一个 ContentContainer 来管理 connect() 并通过 props 传递一个方法来管理更改吗？

非常感谢您的回答

问候，

托马斯。

Answer 1

您显然没有将调度映射到您的连接中的道具。

redux 的连接方法见docs：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

您可以像这样将调度函数映射到您的道具：

const mapDispatchToProps = (dispatch) => ({ dispatch });
connect(mapStateToProps, mapDispatchToProps)...

你认为我需要创建一个 ContentContainer 来管理 connect() 并通过 props 传递一个方法来管理更改吗？

您不需要容器。容器和（视图）组件之间的代码分离只是一种模式，不是必需的。

作为旁注：我建议使用 compose 来组合您的 HOC，请参阅 this 或 this。