react基础知识2

1. 事件处理

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

在react的事件处理程序中，内部的this是指向undefined

// 解决方案1： 通过this.clickFn.bind(this)

// 解决方案2： 属性初始化器语法, 提供了一个箭头函数

// 解决方案3： 在函数外面包一层箭头函数 onClick={this.clickFn}

// onClick={()=>{this.clickFn()}}

class Event extends React.Component {
  constructor(props) {
    super(props)

    // 提供组件自己的状态
    this.state = {
      msg: 'hello react'
    }

    // 可以在构造函数中，去处理事件处理函数的this问题
    // this.clickFn = this.clickFn.bind(this)
  }
  render() {
    return (
      <div>
        <p>{this.state.msg}</p>
        {/* 需求：点击button的时候，需要改变msg的数据 */}
        <button
          onClick={() => {
            this.clickFn()
          }}
        >
          点我修改msg
        </button>
        <a href="" onClick={this.clickFn} />
      </div>
    )
  }

  clickFn() {
    // 修改msg的数据
    // 注意点： 在react注册事件的时候，提供的事件处理函数的内部this指向undefined
    // 没办法访问到this，没有办法访问到当前实例，没有办法访问到数据
    // 如果想要修改react的状态，不能直接通过this.state.xxx去修改
    this.setState({
      msg: '呵呵'
    })
  }
}

ReactDOM.render(<Event />, document.getElementById('app'))

传参的问题：

// 传参第一种： 通过bind的方式进行传参，还想要获取事件对象, 事件对象是最后一个参数

// 参数第二种： 通过给事件处理程序包裹一个箭头函数

// 在注册事件的时候，能够传递参数
class Event extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        <ul>
          <li>
            {/* 能够把id传递过来 */}
            <button
              onClick={() => {
                this.clickFn(1)
              }}
            >
              删除1
            </button>
          </li>
          <li>
            <button
              onClick={() => {
                this.clickFn(2)
              }}
            >
              删除2
            </button>
          </li>
          <li>
            <button>删除3</button>
          </li>
        </ul>
      </div>
    )
  }

  // 传参第一种： 通过bind的方式进行传参，还想要获取事件对象, 事件对象是最后一个参数
  // 参数第二种： 通过给事件处理程序包裹一个箭头函数
  clickFn(id) {
    console.log(id)
  }
}
ReactDOM.render(<Event />, document.getElementById('app'))

2. 条件渲染

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

条件渲染——元素变量

class Score extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      score: 90
    }
  }
  render() {
    // 可以使用变量来保存react的对象
    let cont