반응에서 표시하고 숨기는 방법

반응에서 표시하고 숨기는 방법: 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?&#39;word-style&#39;:&#39;word-style hide&#39;}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?&#39;&#39;:&#39;hide&#39;} word-style`}>显示的元素</div>
            </div>
        )
    }
}

이러한 방법에는 사용법에도 차이가 있다는 점에 유의해야 합니다.

• 방법 1은 요소를 다시 렌더링하므로 성능 집약적이므로 자주 표시 및 숨기기를 제어하는 ​​데 적합하지 않습니다. 이런 경우에는 두 번째나 세 번째 방법이 디스플레이를 통해 제어하는 ​​것이 더 합리적이다.

• 방법 1은 사용자 수준에 따라 다른 콘텐츠를 표시하는 사용자 정보 페이지와 같이 보안이 높은 페이지에 적합합니다. 이때 방법 1이나 2를 사용하면 사용자가 계속해서 볼 수 있습니다. 페이지가 여전히 렌더링되고 숨겨져 있기 때문에 네트워크를 엽니다. 첫 번째 방법은 사용자 정보의 DOM 요소를 직접 렌더링하지 않아 보안을 보장하는 것입니다.

관련 무료 학습 권장사항: JavaScript(동영상)

위 내용은 반응에서 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!