props

image.png

• 从子元素传递onCLick事件给父元素

// 父元素
export default class Father extends React.Component {
  render() {
    return (
        <Child handleClickOrder={this.handleClickOrder.bind(this)} />
    )
  }

  handleClickOrder(){
  }
}

// 子元素
export default class Child extends React.Component {
  render() {
    return (
        <div onClick={this.props.handleClickOrder}>          
        </div>
    )
  }
}

• 从子元素传递onCLick事件(带参数)给父元素

// 父元素
export default class Father extends React.Component {
  render() {
    return (
        <Child handleClickOrder={this.handleClickOrder.bind(this)} />
    )
  }

  handleClickOrder(Id){
    console.log(Id);
  }
}

// 子元素
export default class Child extends React.Component {
  render() {
    return (
        <div onClick={()=>{this.props.handleClickOrder(this.props.data.id)}}>          
        </div>
    )
  }
}

如上所示，父元素获取到子元素的Id，注意，子元素的onClick不能写成onClick={this.props.handleClickOrder(this.props.data.id)}，会造成重复渲染

state

ref

• 获取dom元素
  父组件、子组件获取dom元素

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    this.textInput.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

image.png

• 获取自定义组件
  父组件直接获取自定义的子组件

import React from 'react'
import WWTextView from './WWTextView'

export default class NotFound extends React.Component {

  render() {
    console.log('render');
    return (
        <div>
          <WWTextView
              ref={(input)=>{this.textInput=input}}
          />
        </div>
    )
  }

  componentDidMount(){
    this.textInput.focusTextInput();
  }

}

自定义组件WWTextView如下

import React from 'react'

export default class WWTextView extends React.Component {

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    this.textInput.focus();
    console.log('haha');
  }

  render() {
    console.log('render');
    return (
        <div>
          <input
              type="text"
              ref={(input) => { this.textInput = input; }} />
          <input
              type="button"
              value="Focus the text input"
              onClick={this.focusTextInput.bind(this)}
          />
        </div>
    )
  }

}

props与state区别

名称	props	state
使用场景	父组件传值给子组件	表示组件内部状态，不限父组件、子组件
重新渲染	父组件传给子组件的props发生变化，也会导致子组件的重新渲染	state变化导致组件重新渲染
用途	用于放置初始化数据，且一直不变的	用于放置那些组件变化而更新的数据