반응에서 표시하고 숨기는 방법: 1. vue의 [v-if]와 유사하게 상태 변수를 사용하여 요소 렌더링 여부를 제어합니다. 2. vue의 [v-show]와 유사하게 스타일을 통해 표시 속성을 제어합니다. 3. 동적으로 className을 전환합니다.
이 튜토리얼의 운영 환경: windows10 시스템, React16, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.
React 표시 숨기기 방법:
방법 1:
첫 번째 방법은 이 예제에서 showElem
변수를 사용하여 요소 로드 여부를 제어하는 것입니다. showElem이 false인 경우 콘텐츠가 렌더링되지 않습니다. 곧장.
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:true } } render(){ return ( <div> { this.state.showElem?( <div>显示的元素</div> ):null } </div> ) } }
방법 2:
이 방법은 매우 간단합니다. 표시 속성을 통해 요소의 표시 및 숨기기를 제어하는 것입니다.
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:'none' } } render(){ return ( <div style={{display:this.state.showElem}}>显示的元素</div> ) } }
방법 3:
className을 통해 hide를 전환하여 요소를 표시하고 숨깁니다.
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:true } } render(){ return ( <div> {/* 写法一 */} <div className={this.state.showElem?'word-style':'word-style hide'}>显示的元素</div> {/* 写法二 */} <div className={`${this.state.showElem?'':'hide'} word-style`}>显示的元素</div> </div> ) } }
이러한 방법에는 사용법에도 차이가 있다는 점에 유의해야 합니다.
방법 1은 요소를 다시 렌더링하므로 성능 집약적이므로 자주 표시 및 숨기기를 제어하는 데 적합하지 않습니다. 이런 경우에는 두 번째나 세 번째 방법이 디스플레이를 통해 제어하는 것이 더 합리적이다.
방법 1은 사용자 수준에 따라 다른 콘텐츠를 표시하는 사용자 정보 페이지와 같이 보안이 높은 페이지에 적합합니다. 이때 방법 1이나 2를 사용하면 사용자가 계속해서 볼 수 있습니다. 페이지가 여전히 렌더링되고 숨겨져 있기 때문에 네트워크를 엽니다. 첫 번째 방법은 사용자 정보의 DOM 요소를 직접 렌더링하지 않아 보안을 보장하는 것입니다.
관련 무료 학습 권장사항: JavaScript(동영상)
위 내용은 반응에서 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!