我想為編輯器製作一個可拖曳的分割面板。其行為主要類似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 ( <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 {this.state.toExpand ? "ArrowUp" : "ArrowDown"} </div> </Allotment.Pane> </Allotment> </div> </div> ); } }
P粉5125267202024-03-31 00:18:13
這不是問題,它確實發生了變化,但是,文檔指出:< /p>
它沒有配置為在 prop 更改時更新,但是,如果將其設為 ArrowDown 後雙擊邊框,它將重置為 50%。
相反,如果您透過先在建構函式中初始化參考來新增 Allotment 元素的參考:
constructor(props) { super(props); this.allotment = React.createRef(); this.state = { toExpand: true }; }
並將其指定為道具:
然後,您可以向 setState 新增回調,以便在變更呼叫重設函數的展開選項時:
resetAllotment() { if (this.allotment.current) { this.allotment.current.reset(); } } // ... this.setState({ toExpand: !this.state.toExpand }, () => this.resetAllotment());
旁注,在setState 回呼中呼叫重置之前,分配元件似乎沒有時間處理新的道具變更...但這對我來說不合邏輯,但是,您可以透過hacky setTimeout 為0ms 來解決此問題:
resetAllotment() { setTimeout(() => this.allotment.current && this.allotment.current.reset(), 0); }