美文网首页React Native
React 父与子之间传递

React 父与子之间传递

作者: 踏云小子 | 来源:发表于2017-11-16 13:42 被阅读13次

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变化导致组件重新渲染
用途 用于放置初始化数据,且一直不变的 用于放置那些组件变化而更新的数据

相关文章

  • React 父与子之间传递

    props 从子元素传递onCLick事件给父元素 从子元素传递onCLick事件(带参数)给父元素 如上所示,父...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • React 笔记摘要

    父子组件数据通信 父子组件之间的数据通信细分其实还有两种:父与子之间和子与父之间。 在React中,父与子之间的数...

  • react组件之间的通讯

    背景故事很简单:父组件对子组件传递信息,直接使用props即可;子组建对父组件传递信息,参考自React 组件之间...

  • 总结

    React组件之间的通信方式 1.父组件向子组件通信 React数据流动是单向的,通过props传递 2.子组件向...

  • 组件的通讯

    父子间访问子组件之间的信息(父传子) 子组件访问父组件之间的信息(子传父) 兄弟之间的传递(子传子) 父传子 子传...

  • React 问答

    React 父子组件之间如何通信。 参考答案父组件要传数据给子组件很简单,直接放在 props 里即可子组件要传递...

  • react组件传值的几种方式

    react 组件传值一、父组件传给子组件父组件通过props传递给子组件; 二、子组件传给父组件父组件通过prop...

  • React父组件与子组件之间的值传递

    整体代码地址:https://github.com/klren0312/react_study/blob/mast...

  • react 父组件与子组件之间的值传递

    概念上,组件是封闭的环境。React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事。以正确的技术...

网友评论

    本文标题:React 父与子之间传递

    本文链接:https://www.haomeiwen.com/subject/tjphvxtx.html