찾다

 >  Q&A  >  본문

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

편집기용으로 드래그 가능한 분할 패널을 만들고 싶습니다. 그 동작은 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>
    );
  }
}

P粉349222772P粉349222772234일 전431

모든 응답(1)나는 대답할 것이다

  • P粉512526720

    P粉5125267202024-03-31 00:18:13

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

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

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

    으아아아

    prop로 지정:

    으아아아

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

    으아아아

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

    으아아아

    회신하다
    0
  • 취소회신하다