할당된 변수 소품의 기본 크기가 제대로 작동하지 않습니다.

Question

편집기용으로 드래그 가능한 분할 패널을 만들고 싶습니다. 그 동작은 CodeSandbox의 Console 패널과 대부분 유사합니다:

1. Console时，面板展开，箭头变为ArrowDown을 클릭하면 패널이 확장되고 화살표가 ArrowDown으로 변경되어 닫힙니다.
2. 패널 테두리를 드래그할 수 있습니다.
3. 확장된 패널에서 Console 时，面板关闭，箭头变为 ArrowUp를 클릭하면 패널이 닫히고 화살표가 ArrowUp으로 바뀌어 확장됩니다.

https://github.com/johnwalley/allotment의 다음 코드(https://codesandbox.io/s/reset-forked-ydhy97?file=/src/App.js:0-927)가 있습니다. 문제는 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 (
      <div>
        <div className={styles.container}>
          <Allotment vertical>
            <Allotment.Pane>Main Area</Allotment.Pane>
            <Allotment.Pane preferredSize={this.state.toExpand ? "0%" : "50%"}>
              <div
                onClick={() => {
                  this.setState({ toExpand: !this.state.toExpand });
                }}
              >
                Console &nbsp;
                {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
              </div>
            </Allotment.Pane>
          </Allotment>
        </div>
      </div>
    );
  }
}

Answer 1

이것은 문제가 아니며 변경되었지만 문서에는 다음과 같이 명시되어 있습니다.

prop가 변경될 때 업데이트되도록 구성되어 있지 않습니다. 단, ArrowDown으로 설정한 후 테두리를 두 번 클릭하면 50%로 재설정됩니다.

반대로 생성자에서 참조를 먼저 초기화하여 할당 요소에 대한 참조를 추가하는 경우:

으아아아

prop로 지정:

으아아아

그런 다음 확장 옵션을 변경할 때 재설정 함수가 호출되도록 setState에 콜백을 추가할 수 있습니다.

으아아아

참고, 할당 구성 요소는 setState 콜백에서 재설정을 호출하기 전에 새 속성 변경을 처리할 시간이 없는 것 같습니다...하지만 제 생각에는 이해가 되지 않습니다. 하지만 hacky로 해결할 수 있습니다. setTimeout을 0ms로 이 질문:

으아아아