本節(jié)知識(shí)點(diǎn)

(1)React組件化

(2)React父子組件傳值

(一)組件

在React中組件都是對(duì)應(yīng)的一個(gè)個(gè)類(lèi),每一個(gè)js文件都可以代表一個(gè)組件。
組件之間引用的時(shí)候必須要通過(guò)import而且首字母必須要大寫(xiě)

import List from './list'
class App extends Component {
 render() {
    return (
      <Fragment>
        {/*這就是注釋*/}
        <input value={this.state.value2} onChange={this.change.bind(this)} />
        <button onClick={this.tijiao.bind(this)}>提交</button>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <List
                content={item}
                index={index}
                deletedate={this.deleteone.bind(this)}
                key={index}
              />
            )
          })}
        </ul>
      </Fragment>
    )
  }
}

父組件給子組件傳值

傳遞的值可以是方法(記住綁定this),也可以是值

子組件修改父組件傳遞過(guò)來(lái)的值

必須依賴(lài)父組件傳遞過(guò)來(lái)的方法
第一步父組件把方法傳遞過(guò)來(lái)。
第二部子組件在調(diào)用
下面這個(gè)示例就是父組件把deleteone方法以deletedate形式傳遞給了子組件
子組件接受后調(diào)用的時(shí)候就是this.props.deledate
子組件

import React, { Component } from 'react'
class list extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return <div onClick={this.deleteone.bind(this)}>{this.props.content}</div>
  }
  deleteone() {
    let value = this.props.index
    console.log(value)
    this.props.deletedate(value)
  }
}

export default list

父組件 注意看deleteone

import React, { Component, Fragment } from 'react'
import List from './list'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value2: '請(qǐng)輸入要輸入的值',
      list: []
    }
  }
  render() {
    return (
      <Fragment>
        {/*這就是注釋*/}
        <input value={this.state.value2} onChange={this.change.bind(this)} />
        <button onClick={this.tijiao.bind(this)}>提交</button>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <List
                content={item}
                index={index}
                deletedate={this.deleteone.bind(this)}
                key={index}
              />
            )
          })}
        </ul>
      </Fragment>
    )
  }
  change(e) {
    console.log(e.target.value)
    this.setState({
      value2: e.target.value
    })
  }
  tijiao() {
    let list2 = [...this.state.list, this.state.value2]
    this.setState({
      list: list2,
      value2: ''
    })
  }
  deleteone(index) {
    console.log(index)
    let list2 = [...this.state.list]
    list2.splice(index, 1)
    this.setState({
      list: list2
    })
  }
}

export default App