एक घटक से दूसरे घटक में डेटा तक पहुंच

Question

हाय मैं प्रतिक्रियाओं को सीखना शुरू कर रहा हूं। तो मूल बातें समझने के बाद मैं प्रतिक्रियाओं का उपयोग कर डेटाबेस कनेक्टिविटी पर काम करना शुरू कर रहा हूं। कोड में मैं डीडी कनेक्टिविटी स्थापित करने और डीबी में उपलब्ध टेबलों को सूचीबद्ध करने की कोशिश करने के लिए उपयोगकर्ता आईडी और पासवर्ड प्राप्त करने का प्रयास कर रहा हूं। Login.js में जब मैंने लॉगिन बटन क्लिक किया है तो मैंने एक फॉर्म (userId और पासवर्ड) बनाया है, मैं एक कनेक्टिविटी बनाउंगा और डीबी में सभी टेबल सूचीबद्ध करने के लिए Show Table क्वेरी निष्पादित करूँगा, और Table.js पेज पर जा सकता हूं जहां मैं सूची बनाने का प्रयास करता हूं उपलब्ध टेबल अभी मैं डीबी से कनेक्ट करने में सक्षम हूं लेकिन Table.js में टेबल प्रदर्शित करने में सक्षम नहीं है, तो Table.js फ़ाइल में टेबल सूची को कैसे प्रदर्शित करें, क्योंकि मैंने लॉगिन में एक बटन ईवेंट के अंदर अपनी डीबी कनेक्टिविटी और क्वेरी डाली है .js। इसके अलावा एक वैरिएबल ग्लोबल घोषित करना और किसी अन्य जेएस फाइलों में इसे एक्सेस करना संभव है। कोई मदद महान होगी, धन्यवाद।

Login.js

import React from 'react'; 
import TableContent from './tables'; 
class Login extends React.Component{ 
    constructor(){ 
     super(); 
     this.state={ 
      showComponent : false, 
     }; 
     // this.buttonClick = this.buttonClick.bind(this); 
    } 

    buttonClick(event){ 
     event.preventDefault(); 
     this.setState({ 
      showComponent: true, 
     }) 

     var db = require('@dataBase/dynamoConnect')({ 
      "UserId": "XXXXXXXXXXXXXXXXXXXXXXXX", 
      "Password": "YYYYYYYYYYYYYYY", 
      "region": "ZZZZZZZZZZ" 
     }); 
     db.query("SHOW TABLES",(err,data)=>{ 
     const tableList = data; 
     console.log(tableList); 
     }) 
    } 
    render(){ 
     return(
      <div> 
       <form> 
        <label>User Id :</label> 
        <input type="text" className="test"/> 
        <br/> 
        <label>Password :</label> 
        <input type="text" className="test" /> 
        <button onClick={this.buttonClick.bind(this)} className="connect" > Login</button> 
        </form> 
       {this.state.showComponent && <TableContent />} 
      </div> 
     ) 
    } 
} 

export default Login; 

Table.js

import React from 'react'; 

class TableContent extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      showComponent: false, 
     }; 
     this.buttonClick = this.buttonClick.bind(this); 
    } 

    buttonClick(event) { 
     event.preventDefault(); 
     this.setState({ 
      showComponent: true, 
     }) 
    } 

    render() { 
     return (
      <div> 
       <form> 
       <div id="first"> 
       <label> Table </label> 
       <br /> 
       //Display the tables from DB here 
       <select name="sometext" multiple="multiple" > 
        <option>Table1</option> 
        <option>Table2</option> 
        <option>Table3</option> 
        <option>Table4</option> 
        <option>Table5</option> 
       </select> 
       </div> 
       <div id="second"> 
       <label> SQL </label> 
       <br/> 
       <textarea rows="4" cols="50">SQL </textarea> 
       </div> 
       <button onClick={this.buttonClick.bind(this)} > Execute </button> 
       <div id="third" > 
       {this.state.showComponent && <SampleTable />} 
       </div> 
       </form> 
      </div> 
     ) 
    } 
} 

export default TableContent; 

Answer 1

पहले।

Table.js घटक को प्रदर्शित करने के लिए डेटा को जानने की आवश्यकता है। -
1 आप, घटक राज्य में क्वेरी का परिणाम को बचाने के लिए क्वेरी कॉलबैक में this.setState({tableData: tableList}) फोन करके है:

db.query("SHOW TABLES",(err,data)=>{ 
    const tableList = data; 
    this.setState({ 
    tableData: tableList, 
    }); 
}) 

2 - आप को बचाया परिणाम इस तरह, TableContent करने के लिए एक संपत्ति के रूप में पारित करने के लिए की जरूरत है:

Login.js:
{this.state.showComponent && <TableContent data={this.state.tableData} />};

3 - बच्चे के घटक में डेटा प्रस्तुत करें। आप this.props.data के माध्यम से इसका उपयोग कर सकते हैं। आप परिणाम सरणी पर पुन: सक्रिय कर सकते हैं और एकल लूप में सभी तालिका पंक्तियां प्रस्तुत कर सकते हैं। this react doc पर एक नज़र डालें।

दूसरा:

इसके अलावा वहाँ एक और जे एस फ़ाइलें

संक्षेप में भर में एक चर वैश्विक और उपयोग यह घोषणा करने के लिए एक संभव है - हाँ। आप अपने मॉड्यूल से कार्यों, चर, वर्गीकरण निर्यात कर सकते हैं।

छोटे उदाहरण:

// scriptA.js; 
export const a = 42; 

// scriptB.js; 
import { a } from 'path/to/scriptA.js'; 
console.log(a) // will print 42; 

यह उदाहरण मान लेता ES6 आयात/निर्यात सुविधा का उपयोग कर रहे हैं। आप require भी इसे कर सकते हैं।

Answer 2

वहाँ घटकों के बीच संवाद स्थापित करने के लिए a number of strategies रहे हैं, लेकिन सबसे आसान तरीका है (फ्लक्स या Redux का उपयोग किए बिना) कार्य करने के लिए एक parent component उपयोग करने के लिए है संचार के लिए मध्यस्थ के रूप में।

बाल बनाने डेटा

class Child1 extends React.Component { 
    constructor() { 
    super() 
    this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick() { 
    this.props.setMessage("hello world") 
    } 

    render() { 
    return <button onClick={this.handleClick}>say hello</button> 
    } 
} 

बाल का उपयोग कर डेटा:

असल में, माता पिता के एक घटक के लिए एक कॉलबैक है कि कुछ राज्य सेट अन्य घटक, नीचे पारित करने के लिए उदाहरण के लिए गुजरता

const Child2 = ({message}) => { 
    return <p>{message}</p> 
} 

अभिभावक

class Parent extends React.Component { 
    constructor() { 
    super() 
    this.state = { message: "" } 
    } 

    render() { 
    return (
     <div> 
     <Child1 setMessage={(message) => this.setState({ message })} /> 
     <Child2 message={this.state.message} /> 
     </div> 
    ) 
    } 
} 

वे भाई बहन नहीं किया जा सकता है, तो इस पैटर्न एक सा ज़ोरदार प्राप्त कर सकते हैं, लेकिन अभी भी सबसे कम आम पूर्वज के रूप में मध्यस्थ घटक होने और प्रासंगिक रंगमंच की सामग्री सभी तरह नीचे गुजर द्वारा प्राप्त किया जा सकता है। उस बिंदु पर, आप फ्लक्स या रेडक्स की जांच कर सकते हैं और पूरी तरह से घटकों से राज्य को बाहरी बनाना चाहते हैं।