Javascript 如何通过更改状态使按钮充当React.js中的单选按钮？

我是一个全新的反应者，我想尝试制作一个寻路可视化工具。我想有按钮，可以点击，这将使该特定的寻路算法活动，而所有其他活动，但我无法实现这一点

我有一个显示按钮的选项组件：

export class Options extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dijkstra: false,
            aStar: false,
            bestSearch: false,
            bfs: false,
            dfs: false,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(name) {
        this.setState({
            dijkstra: false,
            aStar: false,
            bestSearch: false,
            bfs: false,
            dfs: false,
        });

        this.setState({ [name]: true });
    }

    render() {
        return (
            <div className='toolbar'>
                <div className='algorithms'>
                    <Button
                        name="Dijkstra's Algorithm"
                        type='dijkstra'
                        isActive={this.state.dijkstra}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='A* Algorithm'
                        type='aStar'
                        isActive={this.state.aStar}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='Best First Search'
                        type='bestSearch'
                        isActive={this.state.bestSearch}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='BFS'
                        type='bfs'
                        isActive={this.state.bfs}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='DFS'
                        type='dfs'
                        isActive={this.state.dfs}
                        onClick={this.handleClick}
                    />
                </div>
                <div className='info'></div>
                <div className='legend'></div>
            </div>
        );
    }
}

导出类选项扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
迪杰斯特拉：错，
阿斯塔：错，
最佳搜索：错误，
bfs：错，
dfs：错，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（名称）{
这是我的国家({
迪杰斯特拉：错，
阿斯塔：错，
最佳搜索：错误，
bfs：错，
dfs：错，
});
this.setState（{[name]：true}）；
}
render（）{
返回(
);
}
}

状态用于跟踪哪个算法处于活动状态，而handleClick根据按钮的键更改状态。以下是按钮组件的代码：

export class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isActive: false,
        };
    }

    componentWillReceiveProps() {
        if (this.props.isActive) this.setState({ isActive: true });
    }

    render() {
        let active = "";
        if (this.state.isActive) {
            active = "active";
        }
        return (
            <button
                className={`button ${active}`}
                onClick={this.props.onClick(this.props.type)}
            >
                {this.props.name}
            </button>
        );
    }
}

导出类按钮扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
I：错，
};
}
组件将接收道具（）{
if（this.props.isActive）this.setState（{isActive:true}）；
}
render（）{
让活动=”；
if（this.state.isActive）{
active=“active”；
}
返回(
{this.props.name}
);
}
}

我收到一个错误“超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。”

有没有关于如何纠正此问题的帮助或更好的实施方法？

执行此操作时：

<button
    className={`button ${active}`}
    onClick={this.props.onClick(this.props.type)}
>

执行此操作时：

<button
    className={`button ${active}`}
    onClick={this.props.onClick(this.props.type)}
>