如何在React中显示已完成的标签？

Question

大约一个小时前，我问了这个问题，并删除了它，因为我并没有真正尝试显示自己在做什么。基本上，我有3个标签，彼此之间都有指向下一个的链接，但结尾完全重定向。我的目标是在选项卡2处于活动状态时完成选项卡1，在选项卡3处于活动状态时完成选项卡1和2。

我尝试通过以下代码通过道具获得活动标签并将其与标签元素之一进行比较，以实现此目的。然后，在确定它是哪一个（在下面的代码的情况下是第三个）之后，然后通过状态为第一和第二个Tab元素分配一个完整的类。

我认为我走在正确的轨道上，但无法正常工作:(

export default class NewSiteNav extends Component {
    constructor(props) {
        super(props)

        this.state = {
            detailsClass: '',
            toursClass: '',
            poisClass: ''
        };

        console.log(props.tab);

        if(props.tab == document.getElementById("details")) {
            this.setState({detailsClass: 'completed'});
            this.setState({toursClass: 'completed'});
        }
    }

    render() {
        return (
            <Tabs defaultActiveKey={this.props.tab} className="tabs justify-content-center" id="uncontrolled-tab-example">
                <Tab className={this.state.detailsClass} id="details" eventKey="details" title="Details" disabled>

                </Tab>
                <Tab className={this.state.toursClass} id="tours" eventKey="tours" title="Tours" disabled>

                </Tab>
                <Tab className={this.state.poisClass} id="pois" eventKey="pois" title="POIs" disabled>

                </Tab>
            </Tabs>
        )
    }
}