Saiz pilihan untuk prop pembolehubah yang diperuntukkan tidak berfungsi dengan betul.

Question

Saya mahu membuat panel belah boleh seret untuk editor. Kelakuannya kebanyakannya serupa dengan panel CodeSandbox Console:

1. Apabila kita mengklik Console时，面板展开，箭头变为ArrowDown, panel mengembang dan anak panah bertukar kepada ArrowDown untuk menutup.
2. Sempadan panel boleh diseret.
3. Apabila kita mengklik Console 时，面板关闭，箭头变为 ArrowUp pada panel yang dikembangkan, panel akan ditutup dan anak panah bertukar kepada ArrowUp untuk mengembangkan.

Saya mempunyai kod berikut (https://codesandbox.io/s/reset-forked-ydhy97?file=/src/App.js:0-927) oleh https://github.com/johnwalley/allotment. Masalahnya tiada perubahan selepas preferredSize 属性在 this.state.toExpand.

Adakah sesiapa tahu mengapa ini tidak berfungsi?

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

Ini bukan isu, ia telah berubah, namun, dokumentasi menyatakan:

Ia tidak dikonfigurasikan untuk mengemas kini apabila prop berubah, namun, jika anda mengklik dua kali pada sempadan selepas menetapkannya kepada ArrowDown, ia akan ditetapkan semula kepada 50%.

Sebaliknya, jika anda menambah rujukan kepada elemen Peruntukan dengan terlebih dahulu memulakan rujukan dalam pembina:

constructor(props) {
  super(props);

  this.allotment = React.createRef();

  this.state = {
    toExpand: true
  };
}

Dan tetapkan ia sebagai prop:

Anda kemudian boleh menambah panggilan balik ke setState supaya apabila anda menukar pilihan pengembangan fungsi tetapan semula dipanggil:

resetAllotment() {
  if (this.allotment.current) {
    this.allotment.current.reset();
  }
}
// ...
this.setState({ toExpand: !this.state.toExpand }, () => this.resetAllotment());

Nota sampingan, komponen peruntukan nampaknya tidak mempunyai masa untuk mengendalikan perubahan prop baharu sebelum memanggil tetapan semula dalam panggilan balik setState...tetapi ini tidak masuk akal bagi saya, namun, anda boleh menyelesaikannya dengan hacky setTimeout kepada 0ms Soalan ini:

resetAllotment() {
  setTimeout(() => this.allotment.current && this.allotment.current.reset(), 0);
}