react 引用了相同组件如何使state独立

Question

如代码所示

    class Listbox extends React.Component {
        constructor(props) {
            super(props);
            this.state={
                isActive: true
            }
        }
        removeClass = e => {
            this.setState({isActive: false})
        }
        render() {
            return (
                <div className="ListBox" style={{height: `${this.props.ListHeight}`}}>
                    
                    <div className="titleArea">
                        <span className="title">
                            {this.props.title}
                        </span>
                        <span className="subTitle">{this.props.subTitle}</span>
                    </div>
                    {this.props.tabs ? (
                        <div><Button className={{isActive: this.state.isActive}}>近7日</Button><Button onClick={this.removeClass}>近30日</Button></div>
                    ):""}
                    <div className="content" style={{height: `${this.props.contentHeight}`}}>
                        {this.props.children}
                    </div>
                </div>
            )
        }
    }

两个地方引用了Listbox 组件 如何使isActive独立互不影响？

Answer 1

isActive是本地属性，只有Listbox组件可以修改，且互相独立

Answer 2

组件和组件之间不影响吧 都是控制各自的 都有各自的isActive 不互相影响