La taille préférée pour les accessoires variables alloués ne fonctionne pas correctement.

Question

Je souhaite créer un panneau divisé déplaçable pour l'éditeur. Son comportement est essentiellement similaire à celui du panneau Console de CodeSandbox :

1. Lorsque nous cliquons sur Console时，面板展开，箭头变为ArrowDown, le panneau s'agrandit et la flèche se transforme en ArrowDown pour la fermeture.
2. Les bordures des panneaux peuvent être déplacées.
3. Lorsque nous cliquons sur Console 时，面板关闭，箭头变为 ArrowUp sur le panneau développé, le panneau se ferme et la flèche se transforme en ArrowUp pour se développer.

J'ai le code suivant (https://codesandbox.io/s/reset-forked-ydhy97?file=/src/App.js:0-927) par https://github.com/johnwalley/allotment. Le problème c'est que rien ne change après preferredSize 属性在 this.state.toExpand.

Est-ce que quelqu'un sait pourquoi cela ne fonctionne pas ?

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

Ce n'est pas un problème, cela a changé, cependant, la documentation indique :

Il n'est pas configuré pour se mettre à jour lorsque l'accessoire change. Cependant, si vous double-cliquez sur la bordure après l'avoir définie sur ArrowDown, elle sera réinitialisée à 50 %.

En revanche, si vous ajoutez une référence à l'élément Allotment en initialisant d'abord la référence dans le constructeur :

constructor(props) {
  super(props);

  this.allotment = React.createRef();

  this.state = {
    toExpand: true
  };
}

Et désignez-le comme accessoire :

Vous pouvez ensuite ajouter un rappel à setState afin que lorsque vous modifiez les options d'extension, la fonction de réinitialisation soit appelée :

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

Remarque, le composant d'allocation ne semble pas avoir le temps de gérer les nouvelles modifications d'accessoires avant d'appeler reset dans le rappel setState... mais cela n'a pas de sens pour moi, cependant, vous pouvez le résoudre en hacky setTimeout à 0 ms Cette question :

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