react——组件通信、高阶组件

高阶组件

博主文档

父组件

import React, { Component, Fragment } from 'react'
// 组件首字母大写
import TodoItem from './TodoItem'

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
  }

  render() {
    return (
      < Fragment >
        <div>
          <input
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button onClick={this.handleBtnClick}>提交</button>
        </div>
        <ul>
          {this.getTodoItem()}
        </ul>
      </Fragment >
    )
  }

  getTodoItem() {
    return this.state.list.map((item, index) => {
      return (
        <TodoItem
          // 父向子传数据
          item={item}
          index={index}
          // 父向子传方法（注意绑定 this，因为子组件没有这个方法）
          deleteItem={this.handleItemDelete}
          key={index}
        />
      )
    })
  }

  handleInputChange(e) {
    const value = e.target.value
    this.setState(() => ({
      inputValue: value
    }))
  }

  handleBtnClick() {
    // prevState 等于 this.state
    this.setState((prevState) => ({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }))
  }

  handleItemDelete(index) {
    this.setState((prevState) => {
      const list = [...prevState.list]
      list.splice(index, 1)
      return { list }
    })
  }
}

export default TodoList;

子组件

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class TodoItem extends Component {
	// 通过这种方式设置默认值
	static defaultProps = {
    	test: 'hello world'
	}
    constructor(props) {
        super(props)
        // 这种写法在后期复杂组件会节约性能
        this.handleItemDelete = this.handleItemDelete.bind(this)
    }
    render() {
        const { item, test } = this.props
        return (
            <div onClick={this.handleItemDelete}>
                {test} ———— {item}
            </div>
        )
    }

    handleItemDelete() {
    	// 注意：子组件仅可以使用父组件的传值，但不可以改变它（单向数据流）
        // 获取父组件方法和数据（子组件也可以通过父组件传来的方法给父组件传值）
        const { deleteItem, index } = this.props
        deleteItem(index)
    }
}

// 验证类型
// https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
TodoItem.propTypes = {
    item: PropTypes.string.isRequired,// 要求 string 类型且必须传递
    deleteItem: PropTypes.func,
    index: PropTypes.number,
    test: PropTypes.string.isRequired
}

// 设置默认值
TodoItem.defaultProps = {
    test: 'hello world'
}

export default TodoItem