Question

是否可以调用组件中的组件（如开始）

示例

Content.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不是函数”

您是否认为我需要创建一个管理connect（）的ContentContainer并通过props传递一种方法来管理更改？

非常感谢您的回答

此致

托马斯。

Answer 1

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

请参见docs中的redux'连接方法：

connect（[mapStateToProps]，[mapDispatchToProps]，[mergeProps]，[options]）

您可以像这样将调度功能映射到道具：

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

您是否认为我需要创建一个管理connect（）的ContentContainer并通过props传递一种方法来管理更改？

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

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

组件中的组件，React redux

1 个答案: