其他分享
首页 > 其他分享> > react 方法传参(转发)

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.

 

标签:传参,React,Child2,Parent,Child1,Component,react,转发,data
来源: https://www.cnblogs.com/panpanwelcome/p/14416145.html