分配的可变道具的首选大小无法正常工作。-PHP中文网问答

我想为编辑器制作一个可拖动的分割面板。其行为主要类似于CodeSandbox的Console面板：

当我们点击Console时，面板展开，箭头变为ArrowDown用于关闭。
面板的边框是可拖动的。
当我们在展开的面板上点击 Console 时，面板关闭，箭头变为 ArrowUp 进行展开。

我有以下代码（https://codesandbox.io/s/reset-forked-ydhy97?file=/src/App.js:0-927），作者：https://github.com/johnwalley/allotment 。问题是 preferredSize 属性在 this.state.toExpand 之后没有更改。

有人知道为什么这不起作用吗？

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import styles from "./App.module.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
  }

  render() {
    return (
      
        
          
            Main Area
            
               {
                  this.setState({ toExpand: !this.state.toExpand });
                }}
              >
                Console  
                {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
              
            
          
        
      
    );
  }
}