首页 / REACT / React组件传值方式总结

React组件传值方式总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React组件传值方式总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2708字，纯文字阅读大概需要4分钟。

内容图文

1. 子组件向父组件传值

父组件Header:

        import Nav from ‘Nav.js‘;
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
    this.callbackForNav = this.callbackForNav.bind(this);
  }
  callbackForNav({ selectedTopChannelOrder, selectedSubChannelOrder, selectedTopChannelName, selectedSubChannelName }) {
    this.setState({ 
      selectedTopChannelOrder, 
      selectedSubChannelOrder, 
      selectedTopChannelName, 
      selectedSubChannelName 
    })
  }
  render() {
    return (<Nav channels={navChannelData} dynamicnav={dynamicNav}  defaultSelectedTopChannelOrder={navDefaultTopOrder} defaultSelectedSubChannelOrder={navDefaultSubOrder} callbackFunc={this.callbackForNav} sticky="top" />)
  }
}

子组件Nav:

        class Nav extends React.Component {
  constructor() {
    this.state = {
      selectedTopChannelOrder:0, 
      selectedSubChannelOrder:-1,
      selectedTopChannelName: "", 
      selectedSubChannelName:""
    }
  }
  static propTypes = {
    callbackFunc: PropTypes.func
  }
  componentDidMount() {
    const {selectedTopChannelOrder, selectedSubChannelOrder, selectedTopChannelName, selectedSubChannelName} = this.state;
    this.props.callbackFunc({selectedTopChannelOrder, selectedSubChannelOrder, selectedTopChannelName, selectedSubChannelName}) 
  }
  clickSubChannel() {
     this.setState({
        selectedTopChannelOrder: topOrder,
        selectedTopChannelName: topName,
        selectedSubChannelOrder: subOrder,
        selectedSubChannelName: subName
    });
    this.props.callbackFunc({
        selectedTopChannelOrder: topOrder,
        selectedTopChannelName: topName,
        selectedSubChannelOrder: subOrder,
        selectedSubChannelName: subName
    });
  }

  render() {
    return (...)
  }
}

2. 跨级组件传值

利用context

父组件:

        class List extends React.Component {
  static childContextType = {
    color:PropTypes.string
  }

  getChildContext() {
    return {
      color:‘red‘
    }
  }
  render() {
    return (...)
  }
}

子组件:

        class ListItem extends React.Component {
  static contextTypes = {
    color:PropTypes.string
  }

  render(){
    return (
      <li style={{background:this.context.color}}>someword</li>
    )
  }
}

3. 无嵌套关系的组件传值

        import {EventEmitter} from ‘events‘;

const emitter = new EventEitter();

class A extends React.Component {
  clickHandler(data,e) {
    this.setState({
      ...
    });
    emitter.emit(‘theclick‘, data);
  }
  render() {
    const data = ‘xxx‘;
    return (<div onClick={this.clickHandler.bind(this, data)} />)
  }
}

App containing A and B:

        import {EventEmitter} from ‘events‘;

const emitter = new EventEitter();

class App extends React.Component {
  componentDidMount() {
    this.listenerForTheClick = emitter.on(‘theclick‘, (data) => {
      this.setState({
        propForB: data;
      })
    })
  }
  componentWillUnmount() {
    emitter.remove(this.listenerForTheClick);
  }

  render() {
    return (
      <B someprop={this.state.propForB} />
      <A />
    )
  }
}

原文：https://www.cnblogs.com/Bonnie3449/p/9642205.html

内容总结

以上是互联网集市为您收集整理的React组件传值方式总结全部内容，希望文章能够帮你解决React组件传值方式总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://www.qyyshop.com/info/1190775.html

来源：【匿名】