React if 显示与隐藏(切换)

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/88775992

需求:

点击Button按钮让内容在显示与隐藏中切换 

import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';


class App extends Component {
  state={
    persons:[
      {
        name:"周家大小姐"
      }
    ],
    showPreson:false,
    
  };
  // 显示隐藏
  click =()=>{
    const doesShow = this.state.showPreson;
    this.setState({//点击的时候取反
      showPreson:!doesShow
    })
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.click}>显示与隐藏</button>
      {
        this.state.showPreson ?
          <Footer name={this.state.persons[0].name}  v-if="showPreson"/> : null
      }
      </div>
    );
  }
}

export default App;

---

以上方式写入之后你会发现结构有点乱,其实可以在优化一下:

import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';


class App extends Component {
  state = {
    persons: [
      {
        name: "周家大小姐"
      }
    ],
    showPreson: false,

  };
  nameChangedHandler = (event) => {//event可以得到Input中的内容
    console.log(event.target.value)//修改state中的数据实现双向绑定
    this.setState({
      persons: [
        {
          name: event.target.value
        }
      ]
    })
  };
  // 显示隐藏
  click = () => {
    const doesShow = this.state.showPreson;
    this.setState({
      showPreson: !doesShow
    })
  }
  render() {
    //定义一个空值,在else的时候使用
    let persons = null;
    if (this.state.showPreson) {
      persons = (
        <Footer name={this.state.persons[0].name} changed={this.nameChangedHandler} v-if="showPreson" />
      )
    }
    return (
      <div className="App">
        <button onClick={this.click}>显示与隐藏</button>
        {/* 当showPreson为falser 的时候走这一步为空也就是隐藏 */}
        {persons}
      </div>
    );
  }
}

export default App;