javascript - ReactJS 组件在 className 更改时意外重新加载

Question

TLDR;
将 className 添加到令人兴奋的 div 是否会重新加载 ReactJs 中的父组件？在按钮附近添加图像以显示 console.log 被多次调用。

这是错误..

我正在构建一个简单的“订购”应用程序，其中包括一个边栏。

我在一个新元素中重新创建了侧边栏以进行完整性检查。同样的问题。这是简单的版本。

class App extends Component {
  constructor() {
    super();
    this.state = {
      addList : [],
    }
  }
  render() {
    return (
      <div className="App">
        <Sidebar list = {this.state.addList}/>
      </div>
    );
  }
}

export default App;

在侧边栏组件中

class Sidebar extends Component {
    constructor(props){
        super(props);
        this.state = {
            active : false
        }
    }
    toggleSidebar () {
        if (this.state.active) {
            this.setState({
                active : false
            })
        } else {
            this.setState({
                active: true
            })
        }
    }
    render () {
        return (
            <div className={ 'sidebar ' + ((this.state.active) ? '' : 'hidden')}>
                <button className='tab' onClick={(e)=>{this.toggleSidebar()}}>
                        TAB
                </button>
                <div className="itemList">
                    {console.log(this.props.list)}
                </div>
            </div>
        )
    }
}

export default Sidebar;

sideBar 类有一个 position: fixed 我通过单击按钮将其移出屏幕并添加一个 hidden className (.hidden { right : -x )

当在父应用程序组件中选择一个元素时，它会添加到其状态 (addItem)。

Sidebar 组件传递了该属性，因此当 addItem 获得一个新元素时，它会显示它。它按预期工作。我能够添加元素并显示它们没问题。

当我开始添加数字和计算总价等时，我注意到了这个错误，因为边栏似乎一直在渲染，我会发现自己陷入了无限的 setState 循环

任何解决方案或建议？

视觉图像(单击选项卡和控制台显示):

Answer 1

答案很简单，我傻。事实上，我正在改变侧边栏的状态导致重新加载。

因此，为了解决这个问题，让父组件保存这些值并将它们作为属性传递给侧边栏以仅显示。因此在重新加载时，值不会更改或重新添加。