React 16 之父子组件传值

React16 学习第二篇，分享自己总结的学习笔记以及需要注意的点。

JSX 防止踩坑

在 JSX 中使用样式，用 className 而不是 class
dangerouslySetInnerHTML 添加 HTML 解析

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


import React,{Component, Fragment} from 'react'
import './style.css'
class List extends Component{
  constructor(props){
    super(props)
    this.state = {
      inputValue: 'default',
      list: ['Sing','Dance','Basketball']
    }
  }
  render(){
    return (
      <Fragment>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} className='inp' />
        <button onClick={this.addContent.bind(this)}>Add</button>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return <li 
                        key={item+index} 
                        onClick={this.deleteItem.bind(this,index)}
                        dangerouslySetInnerHTML={{__html:item}}
                      >
                      </li>
            })
          }
        </ul>
      </Fragment>
    )
  }
  
  inputChange(e){
    this.setState({
      inputValue: e.target.value
    })
  }

  addContent(){
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

}

export default List

父子组件传值

父组件向子组件传值：属性传值，子组件使用 props 进行接收

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{/* 父组件List */}
<Fragment>
  <label htmlFor="inputId">Add Skills:</label><br />
  <input id="inputId" value={this.state.inputValue} onChange={this.inputChange.bind(this)} className='inp' />
  <button onClick={this.addContent.bind(this)}>Add</button>
  <ul>
  {
     this.state.list.map((item,index)=>{
       return (
         <div>
           {/* 自定义属性 */}
           <Skill content={item} />
         </div>
         )
      })
  }
  </ul>
</Fragment>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{/* 子组件Skill */}
import React, { Component } from 'react';
class Skill extends Component {
  render() { 
    return ( 
    <li>{ this.props.content }</li>
     );
  }
}
export default Skill;

子组件"操作"父组件的数据：不能直接操作，应该用传值的方式将父组件的方法传递给子组件，再进行操作。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


{/* 父组件List */}
<Fragment>
  <label htmlFor="inputId">Add Skills:</label><br />
  <input id="inputId" value={this.state.inputValue} onChange={this.inputChange.bind(this)} className='inp' />
   <button onClick={this.addContent.bind(this)}>Add</button>
   <ul>
     {
        this.state.list.map((item,index)=>{
          return (
            <Skill 
              content={item} 
              key={item+index} 
              idx={index}
              deleteItem={this.deleteItem.bind(this)}
            />
            )
          })
       }
     </ul>
</Fragment>
{/* ... */}
  // 删除列表项
  deleteItem(index){
    // console.log(index)
    // 不能直接操作 state 里的值 需要赋值给一个局部变量 再操作
    let list = this.state.list
    list.splice(index,1)
    this.setState({
      list: list
    })
  }