zoukankan      html  css  js  c++  java
  • react 方法传参(转发)

      1. From Child to Parent using Callbacks
      2. Between Siblings :
        (i) Combine above two methods
        (ii) Using Redux
        (iii) Using React’s Context API

    This blog majorly contains a compilation of the implementation of these concepts, which would surely be beneficial for any beginner trying to grasp things at a glance.

    From Parent to Child Using Props

    Let us consider our directory structure to be such that the Parent Component renders child components in the Application.

    App
    └── Parent
    ├── Child1
    └── Child2

    This is the easiest direction of data flow in React and the most basic one.

    class Parent extends React.Component {state = { data : "Hello World" } 
    render() {

    return (
    <div>
    <Child1/> //no data to send
    <Child2 dataFromParent = {this.state.data} />
    </div>
    ); }
    }
    //It is no compulsion to use the data to send as a state, simple vars or const variables could also be used to send data from Parent to Child.
    class Child2 extends React.Component {
    render() {

    return (
    <div>
    The data from parent is:{this.props.dataFromParent}
    </div>
    );
    }
    }

    From Child to Parent Using Callbacks

    Let us suppose I need to send a message from Child1 to Parent — “Hey Popsie, How’s it going?”. To do that, I need to follow a series of steps.

    class Parent extends React.Component {state = { message: "" }callbackFunction = (childData) => {      this.setState({message: childData})},render() {
    return (
    <div>
    <Child1 parentCallback = {this.callbackFunction}/>
    <p> {this.state.message} </p>
    </div>
    );}
    }
    class Child1 extends React.Component{sendData = () => {
    this.props.parentCallback("Hey Popsie, How’s it going?");
    },render() {
    //you can call function sendData whenever you'd like to send data from child component to Parent component.
    }
    };

    Between Siblings

    When I was a beginner, it took me a hard time deciding which method to choose to share data between siblings, there are three methods known to me yet to share data between siblings and all of them have their own perks and cons.
    Method 1: Combine the above two methods of sharing data.
    This method however, will not work for complicated directory structures as one will have to write large bits of code for sending data between components at far levels from each other. The data, then will have to be pushed and pulled through each middle level.

    React Context API - A Replacement for Redux?

    Convert a React App that uses Redux for State Management to use React's New Context API

    blog.bitsrc.io

     

    You Might Not Need Redux

    People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at…

    medium.com

    App
    ├── Child1
    └── Child2
    export const MContext = React.createContext();  //exporting context objectclass MyProvider extends Component {state = {message: ""}render() {        return (            <MContext.Provider value={            {   state: this.state,                setMessage: (value) => this.setState({                            message: value })}}>            {this.props.children}   //this indicates that the global store is accessible to all the child tags with MyProvider as Parent            </MContext.Provider>)    }}
    class App extends React.Component {render() {
    return (
    <div>
    <MyProvider> <div className="App"> <Child1/> <Child2/> </div> </MyProvider> </div>
    );
    }
    }
    import MContext
    class Child1 extends React.Component {render() { return ( <div> <Mcontext.Consumer> {(context) => ( <button onClick={()=>{context.setMessage("New Arrival")}}>Send</button> )} </Mcontext.Consumer> </div> ) }}
    import MContext
    class Child2 extends React.Component {render() { return ( <div> <Mcontext.Consumer> {(context) => ( <p>{context.state.message}}</p>)} </Mcontext.Consumer> </div> )}}

    Using Context in React

    I had the opportunity to speak at React Conf 2018 about the new ways to use context in React. This blog post is a text…

    medium.com

     

    Sign up for The Daily Pick

    By Towards Data Science

    Hands-on real-world examples, research, tutorials, and cutting-edge techniques delivered Monday to Thursday. Make learning your daily ritual. Take a look.

     

     

    By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

  • 相关阅读:
    c# yield关键字原理详解
    Linux环境基于CentOS7 搭建部署Docker容器
    关于c#中委托使用小结
    推荐一本好的c#高级程序设计教程
    WEB网站常见受攻击方式及解决办法
    判断URL是否存在
    提升高并发量服务器性能解决思路
    分享asp.net学习交流社区
    js中对arry数组的各种操作小结
    jQuery动态实现title的修改 失效问题
  • 原文地址:https://www.cnblogs.com/panpanwelcome/p/14416145.html
Copyright © 2011-2022 走看看