Как использовать параметры router-router & Match в Typescript - PullRequest
0 голосов
/ 09 июля 2019

У меня есть родительский компонент React (DeadletterQueues), который отображает двухмерный массив объектов и передает массив объектов в качестве реквизитов моему дочернему компоненту (QueueCards), а затем отображает их.

У меня есть в настоящее времярабочий код, который отображает все эти карты (начальную загрузку) на одной странице в / deadletters /.Моя цель - отобразить каждый массив карт на отдельной «странице» в / deadletters / queues /: queueName.

Похоже, что ответом на это с использованием реакции-маршрутизатора является использование URL-параметров и функции сопоставления (не знаю, как работает сопоставление).Я нашел много примеров / учебников по этому вопросу, но я использую Typescript.Я немного поигрался, и у меня возникли проблемы с адаптацией любых решений с помощью Typescript (я пробовал решение здесь , но не смог ничего с этим сделать).

interface Props {
    deadletterQueues: any
}

interface State {}

@observer
class DeadletterQueues extends Component<Props, State> {

    constructor(props: any) {
        super(props);
    }

    render() {

        let allQueueCards =
            this.props.deadletterQueues.map((deadletters) =>
                <QueueCards deadletters={deadletters} />
            ); 

        return (
            <>
                {allQueueCards}
            </>
        );
    }
}
export default DeadletterQueues;
interface Props {
    deadletters: any;
}

interface State {}

@observer
class QueueCards extends Component<Props, State> {

    constructor(props: any) {
        super(props);
    }

    render() {

        let deadletterCards =
            this.props.deadletters.map((deadletter) =>
                <DeadletterCard deadletter={deadletter} />
            );

        return (
            <div>
                <h3>Name of Queue: </h3>
                { deadletterCards }

            </div>
        );
    }
}
export default QueueCards;

Как я могу изменить свой рабочий код, чтобы вместо этого отображать свои карты на отдельных страницах для каждой очереди, используя параметры и набор текста реакции маршрутизатора?Я также использую mobx, но я не думаю, что это имеет значение здесь.

Цените любую помощь и понимание!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...