Компонент в компоненте, React Redux

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));

На самом деле, когда я делаю это, если мой маршрут совпадаети вызывает тот же компонент «Content», он говорит: «this.props.dispatch не является функцией»

Как вы думаете, мне нужно создать ContentContainer, который управляет connect () и передает метод через props для управленияменять ?

Большое спасибо за ваши ответы

С уважением,

Томас.

Answer 1

Вы явно не сопоставляете рассылку с вашими реквизитами в вашем соединении.

См. документы для избыточного 'метода соединения:

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

Вы можете привязать функцию отправки к вашему реквизиту следующим образом:

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

Делаете ли выдумаете, мне нужно создать ContentContainer, который управляет connect () и передает метод через props для управления изменениями?

Вам не нужен контейнер.Разделение кода между контейнером и компонентом (view-) является просто шаблоном и не требуется.

В качестве обозначения: я бы порекомендовал использовать compose для объединения ваших HOC, см. this или это .