React.js from Getting started to mastering (v)--data transfer between components

I. Data transfer between components in the static

From the above code we can see that the data between the two components is separate, but what if we have some kind of requirement to pass the data from one component to another?

Scene Design:

Passing Homedata in Home.js to Myscreen.js

Import react,{Component} from' React ' import myscreen from"./myscreen";ClassHomeExtendsComponent {Constructor (props) {Super (props);this.state = {homedata: "This is the data of the main component"};} render () {return (<div style={{width:" 100% ", height:< Span class= "hljs-string" > "300px", Fontsize: "20px"}}> < Div style={{width: "100%", Height: "100px", backgroundcolor:< Span class= "hljs-string" > "#ff0"}}></div> <MyScreen/> <div style={{width:" 100% ", Height:" 100px ", Backgroundcolor: "#f0f"}}></div> </div>)}}export default Home       

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

(1) Method one: Use temporary storage, persistent storage, or cookies in the following way: The Home.js code is as follows:

Import react,{Component} from' React ' import myscreen from"./myscreen";ClassHomeExtendsComponent {Constructor (props) {Super (props);This.state = {homedata:"This is the data for the main component"}; } render () {Return (<div style={{width: "100%", Height: "300px", Fontsize: "20px"}}> <div Style={{width: "100%", Height: "100px", Backgroundcolor: "#ff0"}}></div> <MyScreen/> <div style={{ Width: "100%", Height: "100px", Backgroundcolor:" #f0f "}}></div> </div>)} Componentdidmount= () =>{Sessionstorage.setitem ( "Homedata", this.state.homedata); };} Export default Home          

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23

The Myscreen.js code is as follows:

Import react,{Component} from' React 'ClassMyscreenExtendsComponent {Constructor (props) {Super (props);This.state = {Data"" }; } Render () {Return (<div style={{Width"100%",Height"100px",FontSize:"12px",BackgroundColor:"#0ff",TextAlign:"Center",lineheight: "100px"}} onclick={  () =>this.click ()}> { Span class= "Hljs-keyword" >this.state.data} </div>)}  Click= () =>{alert ( "click here!!!!") "); }; componentdidmount= () =>{let homedata=sessionstorage.getitem ( "HomeData"); console.log (Homedata); this.setstate ({data:homedata});};} export default myscreen       

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27

The effect is as follows:

The above methods of using temporary storage are similar to persistent storage and cookies. (2) Method two: Use props to implement data transfer between parent and child components

The above temporary storage method uses the JS native knowledge, but because now is the development according to the React.js framework, therefore advocates uses the react.js knowledge to realize the function.

The Home.js code is as follows:

Import react,{Component} from' React ' import myscreen from"./myscreen";ClassHomeExtendsComponent {Constructor (props) {Super (props);This.state = {homedata: "This is the data of the main component"}; } render () {return (<div style={{width:" 100% ", Height:" 300px ", Fontsize:" 20px "}}> <div style={{width: "100%", Height:  "100px", Backgroundcolor: "#ff0"}}></ div> <myscreen data={this.state.homedata}/> << Span class= "Hljs-keyword" >div style={{width: "100%", Height: " 100px ", Backgroundcolor:" #f0f "}}></div> </div>)}}export default Home      

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st

The Myscreen.js code is as follows:

Import react,{Component} from' React 'Classmyscreen extends component {constructor (props) {super (props); this.state = {};} Render () {return (<div style={{width:" 100% ", Height:" 100px ", Fontsize:" 12px ", Backgroundcolor: "#0ff", Textalign: "center", Lineheight: "100px"}} onclick={() =>this.click ()}> { this.props.data} </div>)} click= () =>{alert ( "click here!!!" "); };} Export default myscreen         

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st

Props is the equivalent of a medium that links the channels between these two components. Ii. data transfer between components in the dynamic

As we can see from the above, data passing between components is automatically executed when the page loads. Now we're going to design another scenario.

Scenario: When you click on the following ID DIV1, the data on the DIV2 changes.

Import react,{Component} from' React ' import myscreen from"./myscreen";ClassHomeExtendsComponent {Constructor (props) {Super (props);This.state = {homedata:"This is the data for the main component"}; } render () {Return (<Div Style={{width:"100%", Height: "300px", Fontsize: "20px"}}> < div id= "Div1" Style={{width: "100% ", Height:" 100px ", Backgroundcolor:" #ff0 "}}onclick={() =>< Span class= "Hljs-keyword" >this.div1click ()}></div> <myscreen Id= "div2" Data={this.state.homedata}/> < Div style={{width: "100%", Height: "100px", backgroundcolor:< Span class= "hljs-string" > "#f0f"}}></div> </div >)} div1click= () =>{};} Export default Home          

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23

Workaround: The Home.js code is as follows:

Import react,{Component} from' React ' import myscreen from"./myscreen";ClassHomeExtendsComponent {Constructor (props) {Super (props);This.state = {homedata:"This is the data for the main component"}; } render () {Return (<Div Style={{width:"100%", Height:"300px", FontSize:"20px"}}> <Div id="Div1" Style={{width:"100%", Height: "100px", Backgroundcolor: "#ff0"}}onclick={() =>this.div1click ()}></div> <myscreen id=  "div2" ref={ref = this. Myscreenref = ref} Datamyscreen={this.state.datamyscreen}> </MyScreen> << Span class= "Hljs-keyword" >div style={{width: "100%", Height: " 100px ", Backgroundcolor:" #f0f "}}></div> </div>)} div1click= () =>{//passing data to subcomponents this. Myscreenref.setdatamyscreen (this.state.homedata);};} Export default Home          

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28

The Myscreen.js code is as follows:

Import react,{Component} from' React 'ClassMyscreenExtendsComponent {Constructor (props) {Super (props);this.state = {data: "This is the data of the Subcomponent"};} render () {return (<div style={{width:" 100% ", height:< Span class= "hljs-string" > "100px", Fontsize: "12px", BackgroundColor:  "#0ff", Textalign: "center", Lineheight:  "100px"}} onclick={() =>this.click ()}> {this.state.data} </< Span class= "Hljs-keyword" >div>)} //method name should be consistent with the main component setdatamyscreen= (data) =>{this.setstate ({data:data}); }; click= () =>{alert ( "click here!!!" "); };} Export default myscreen         

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28

Through event triggering, the data is passed to the subassembly, and then the page is refreshed using this.setstate (), rendering the resulting data up.

React.js from Getting started to mastering (v)--data transfer between components