클릭하여 숨기고 표시하는 방법을 반응으로 구현하는 방법

반응에서 클릭하여 숨기기 표시를 구현하는 방법: 1. 스타일을 사용하여 "{{display:this.state.isShow?'block':'none'}}"과 같은 코드를 표시하고 숨깁니다. 삼항 연산자를 사용하여 "this.state.isShow?(...):(...)"와 같은 코드 숨기기 및 표시를 구현합니다. 3. 단락 논리를 사용하여 "this와 같은 코드"를 표시하고 숨깁니다. .state.isShow&

...< ;/div>".

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

반응에서 클릭하여 숨기기 디스플레이를 구현하는 방법은 무엇입니까?

React에서 요소 표시 및 숨기기 방법

React에서는 vue와 달리 v-if 또는 v-show를 사용하여 요소를 표시하고 숨기는 데 일반적으로 사용되는 네 가지 방법이 있습니다. 요소 숨기기 및 표시하기

다음은 React에서 요소를 숨기고 표시하는 방법을 소개합니다

첫 번째 방법: 스타일을 사용하여 표시하고 숨기기

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第一种方式，用style来显示隐藏*/}
        <button style={{display:this.state.isShow?&#39;block&#39;:&#39;none&#39;}}>张云龙</button>
        <button style={{display:this.state.isShow?&#39;none&#39;:&#39;block&#39;}}>秦霄贤</button>
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

block은 표시를 의미하고, none은 숨김을 의미합니다

두 번째 유형 : 삼항 연산자를 사용하세요

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>

        {/*第二种方法，用三元运算符*/}
            {
            this.state.isShow?(<div>秦霄贤</div>):(<div>张云龙</div>)
            }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

세 번째 유형: 단락 논리를 통해 요소 표시 및 숨기기

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第三种方式*/}
          {
            this.state.isShow && <div>秦霄贤</div>
        }
        {
            !this.state.isShow && <div>张云龙</div>
        }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

네 번째 유형: 함수형

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
        love:'秦霄贤'
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }

    loves=(key)=>{
        switch(key){
            case '秦霄贤':
                return <div>秦霄贤</div>
            case '张云龙':
                return <div>张云龙</div>
        }   
    }

  render() {
    let ok=this.loves(this.state.love)
    return (
      <div>
        {/*第四种函数形式*/}
        {ok}
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

추천 학습: "react 비디오 튜토리얼"

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