javascript - 将数据从一个组件访问到另一个组件

Question

嗨，我开始学习 reactjs。因此，在了解了基础知识之后，我开始使用 reactjs 处理数据库连接。在代码中，我试图获取用户 ID 和密码以建立数据库连接并尝试列出数据库中可用的表。在 Login.js 中，我创建了一个表单(用户 ID 和密码)，当单击登录按钮时，我将建立连接并执行 Show Table 查询以列出数据库中的所有表，然后转到我尝试列出可用表格的 Table.js 页面。现在我可以连接到数据库但不能显示 Table.js 中的表，所以如何在 Table.js 文件中显示表列表，因为我已经放置了我的数据库连接并在 Login.js 的按钮事件中查询。也有可能声明一个全局变量并跨另一个 js 文件访问它。任何帮助都会很棒，谢谢。

登录.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;

表格.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 .

第二:

Also Is there a possible to declare a variable global and access it across the another js files

简而言之 - 是的。您可以从模块中导出函数、变量、类。

小例子:

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

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

此示例假设您使用的是 es6 导入/导出功能。你可以require