Question

我有一个父React组件（DeadletterQueues），它映射出二维对象数组，并将对象数组作为道具传递给我的子组件（QueueCards），然后进行渲染。

我目前有工作代码，可以将所有这些卡（引导程序）呈现在/ deadletters /的同一“页面”上。我的目标是在/ deadletters / queues /：queueName的单独“页面”上呈现卡的每个阵列。

似乎使用react-router的答案是使用URL参数和匹配函数（不确定匹配的工作原理）。我已经找到了很多示例/教程，但是我正在使用Typescript。我玩了一段时间，在使用Typescript调整任何解决方案时遇到了麻烦（我尝试过解决方案here，但无法解决问题）。

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;

如何使用React-Router参数和打字稿修改工作代码，以将卡分别显示在每个队列的单独页面上？我也在使用mobx，但我认为这并不重要。

感谢任何帮助和见解！

如何使用React-Router参数和Typescript中的Match

0 个答案: