반응 조건에 따라 요소를 숨기는 방법

구현 방법: 1. 상태 변수를 사용하여 요소 렌더링 여부를 제어합니다. 값이 false인 경우 콘텐츠가 직접 렌더링되지 않습니다. 2. 스타일을 통해 표시 속성을 제어하고, 속성 값이 있는 경우 요소를 숨깁니다. 3. className을 사용하여 요소를 표시하고 숨기려면 hide를 동적으로 전환합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

React 요소 표시 및 숨기기를 제어하는 ​​방법에는 세 가지가 있습니다. React控制元素显示和隐藏的方法有三种方法：

• 第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。

• 第二种是通过style控制display属性，类似vue 中的v-show。

• 第三种是通过动态切换className。

方法一：

第一种方法是通过此例中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>
        )
    }
}

方法二：

这个方法很简单，就是通过display属性来控制元素显示和隐藏。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.showElem}}>显示的元素</div>
        )
    }
}

方法三：

通过className切换hide

첫 번째는 를 사용하는 것입니다. state vue의 v-if와 유사하게 요소를 렌더링할지 여부를 제어하는 ​​변수입니다.

두 번째 방법은 vue의 v-show와 유사하게 <code>style을 통해 display 속성을 ​​제어하는 ​​것입니다. 코드> .

세 번째 방법은 className을 동적으로 전환하는 것입니다.

방법 1:

첫 번째 방법은 이 예에서 showElem 변수를 사용하여 showElem이 <code>false, 콘텐츠가 직접 렌더링되지 않습니다.

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>
        )
    }
}

방법 2:

이 방법은 매우 간단합니다. display 속성을 ​​통해 요소의 표시 및 숨기기를 제어하는 ​​것입니다.

rrreee

방법 3: 🎜

🎜hide를 className로 전환하여 요소를 표시하고 숨깁니다. 🎜🎜rrreee🎜방법 1은 성능 집약적인 요소를 다시 렌더링하므로 표시 및 숨기기를 자주 제어하는 ​​데 적합하지 않습니다. 이런 경우에는 두 번째나 세 번째 방법이 디스플레이를 통해 제어하는 ​​것이 더 합리적이다. 🎜🎜방법 1은 사용자 수준에 따라 다른 콘텐츠를 표시하는 사용자 정보 페이지와 같이 보안이 높은 페이지에 적합합니다. 이때 방법 1이나 2를 사용하면 사용자가 페이지를 열면 계속 볼 수 있습니다. 네트워크, 페이지가 여전히 렌더링되어 있기 때문에 숨겨져 있습니다. 첫 번째 방법은 사용자 정보의 DOM 요소를 직접 렌더링하지 않아 보안을 보장하는 것입니다. 🎜🎜【관련 추천: 🎜Redis 비디오 튜토리얼🎜, 🎜프로그래밍 교육🎜】🎜

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