父子组件间通信

父→子
传送子组件的属性是父组件传递的，动态修改父组件的值，子组件也会对应的变化

const Item = React.createClass({
  render () {
    let style = this.props.actived ? { 'border': '1px solid green' } : {}
    return 
{this.props.name}
  }
})
const Comp = React.createClass({
  getInitialState () {
    return { 'list': [] }
  },
  componentWillMount () {
    //组件装载前修改传入的data
    this.state.list = this.props.data.map(item => {
      return { 'name': item, 'actived': false }
    })
  },
  componentDidMount () {
    //装载完毕三秒后第二个会加上边框
    setTimeout(() => {
      this.state.list[1].actived = true
      this.forceUpdate()
    }, 3000)
  },
  render () {
    return 
{this.state.list.map(item => {
      console.log(item)
      return 
    })}
  }
})
const List = ['AAA', 'BBB', 'CCC', 'DDD']
ReactDOM.render(, document.getElementById('root'))

图片.png

图片.png

子→父
父组件将自身方法作为props传给子组件，可以让其调用。ps：记得绑定this

const Item = React.createClass({
  render () {
    let style = this.props.actived ? { 'border': '1px solid green' } : {}
    //onClick触发的方法为父组件传递的方法
    return 
{this.props.name}
  }
})
const Comp = React.createClass({
  getInitialState () {
    return { 'list': [] }
  },
  componentWillMount () {
    this.state.list = this.props.data.map(item => {
      return { 'name': item, 'actived': false }
    })
  },
  componentDidMount () {
    setTimeout(() => {
      this.state.list[1].actived = true
      this.forceUpdate()
    }, 3000)
  },
  clickHandler (item) {
    alert(item.name)
  },
  render () {
    return 
{this.state.list.map(item => {
      console.log(item)
        //把clickHandler作为props.click传递给Item，此处绑定了this
      return 
    })}
  }
})
const List = ['AAA', 'BBB', 'CCC', 'DDD']
ReactDOM.render(, document.getElementById('root'))