편집기용으로 드래그 가능한 분할 패널을 만들고 싶습니다. 그 동작은 CodeSandbox의 Console
패널과 대부분 유사합니다:
Console
时,面板展开,箭头变为ArrowDown
을 클릭하면 패널이 확장되고 화살표가 ArrowDown
으로 변경되어 닫힙니다. 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 {this.state.toExpand ? "ArrowUp" : "ArrowDown"} </div> </Allotment.Pane> </Allotment> </div> </div> ); } }
P粉5125267202024-03-31 00:18:13
이것은 문제가 아니며 변경되었지만 문서에는 다음과 같이 명시되어 있습니다. < /p>
prop가 변경될 때 업데이트되도록 구성되어 있지 않습니다. 단, ArrowDown으로 설정한 후 테두리를 두 번 클릭하면 50%로 재설정됩니다.
반대로 생성자에서 참조를 먼저 초기화하여 할당 요소에 대한 참조를 추가하는 경우:
으아아아prop로 지정:
으아아아그런 다음 확장 옵션을 변경할 때 재설정 함수가 호출되도록 setState에 콜백을 추가할 수 있습니다.
으아아아참고, 할당 구성 요소는 setState 콜백에서 재설정을 호출하기 전에 새 속성 변경을 처리할 시간이 없는 것 같습니다...하지만 제 생각에는 이해가 되지 않습니다. 하지만 hacky로 해결할 수 있습니다. setTimeout을 0ms로 이 질문:
으아아아