初学react（七）：if 判断

思路：先定义一个state里的一个状态，因为如果状态改变都会重新执行render，所以在render写上判断动态的赋值，也可以使用三目运算。

import React from 'react';
import './App.css';
import Persion from './Persion/Persion';
class App extends React.Component {
  /**
   * state： 用于改变组件内状态的值（动态）
   * props： 用于组件通信传值
   */
  state = {
   persions: [
     {
       name: '渣渣辉',
       count: '30'
     },
     {
        name: 'aaa',
        count: '20'
      },
      {
        name: 'bbb',
        count: '10'
      },
      {
        name: 'ccc',
        count: '5'
      }
   ],
   otherState: 'anything',
   showPersion:false
  }
  // 函数直接定义在于render同级别，因为class类下,用this.函数名来访问
  switchNameHandLer = ( newName ) => {
    console.log("hello")
    // es6中this执行为当前类
    //this.state.persions[0].name = '渣渣渣渣辉' //不要直接去更改state Use setState()
    this.setState({
      persions: [
        {
          name: newName,
          count: '3000'
        },
        {
          name: 'aaa',
          count: '20'
        },
        {
          name: 'bbb',
          count: '10'
        },
        {
          name: 'ccc',
          count: '5'
        }
      ]
    })
  }  
  nameChangedHandLer = (event) => {
    console.log(event.target)
    this.setState({
      persions: [
        {
          name: event.target.value,
          count: '3000'
        },
        {
          name: 'aaa',
          count: '20'
        },
        {
          name: 'bbb',
          count: '10'
        },
        {
          name: 'ccc',
          count: '5'
        }
      ]
    })
  }
  togglePersonHandle = () =>{
    this.setState({
      showPersion: !this.state.showPersion
    })
  }
  render () {
    const style = {
      backgroundColor: 'red',
      border: '1px solid blue'
    }
    let persions = null;
    if (this.state.showPersion) {
      persions = (<div>
        <Persion
          name={this.state.persions[0].name}
          count={this.state.persions[0].count}
          changed={this.nameChangedHandLer}
        />
        <Persion
          name={this.state.persions[1].name}
          myclick={this.switchNameHandLer.bind(this, '渣渣辉2')}
          count={this.state.persions[1].count} />
        <Persion name={this.state.persions[2].name}
          count={this.state.persions[2].count} />
        <Persion name={this.state.persions[3].name}
          count={this.state.persions[3].count}>
          <a href='http://www.baidu.com'>非常感谢大家的支持</a>
        </Persion>
      </div>)
    }
    return (
      <div className="App">
        hello world
        {/* 函数不能加括号，加括号就直接执行了,使用箭头函数可以实现参数的传递 */}
        {/* <button onClick={() => this.switchNameHandLer('古天乐')}>更改状态值</button> */}
        {/* 第二种方式  bind 传递 （建议） */}
        {/* <button style={style} onClick={this.switchNameHandLer.bind(this, '古天乐')}>更改状态值</button> */}
        <button style={style} onClick={this.togglePersonHandle}>内容切换</button>
        {persions}
        {/* { this.state.showPersion ? 
          <div>
            <Persion
              name={this.state.persions[0].name}
              count={this.state.persions[0].count}
              changed={this.nameChangedHandLer}
            />
            <Persion
              name={this.state.persions[1].name}
              myclick={this.switchNameHandLer.bind(this, '渣渣辉2')}
              count={this.state.persions[1].count} />
            <Persion name={this.state.persions[2].name}
              count={this.state.persions[2].count} />
            <Persion name={this.state.persions[3].name}
              count={this.state.persions[3].count}>
              <a href='http://www.baidu.com'>非常感谢大家的支持</a>
            </Persion>
          </div> : null
        } */}
        
      </div>
    );
  }
}
export default  App;