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

嗨，我开始学英语了。因此，在了解了基础知识之后，我开始使用reactjs进行数据库连接的工作。在代码中，我试图获取用户ID和密码以建立数据库连接，并试图列出数据库中可用的表。在Login.js中，我创建了一个表单（用户ID和密码），当单击Login按钮时，我将进行连接并执行

Show Table

查询以列出数据库中的所有表，然后移动到

Table.js

页面，在那里我尝试列出可用表。现在我可以连接到DB，但无法在

Table.js

中显示表，因此如何在Table.js文件中显示表列表，因为我已将DB连接和查询放在Login.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;

从“React”导入React；
从“./tables”导入TableContent；
类登录扩展了React.Component{
构造函数（）{
超级（）；
这个州={
showComponent:false，
};
//this.buttonClick=this.buttonClick.bind（this）；
}
按钮点击（事件）{
event.preventDefault（）；
这是我的国家({
showComponent:对，
})
var db=require（“@dataBase/dynamoConnect”）({
“用户ID”：“XXXXXXXXXXXXXXXXXXXXX”，
“密码”：“yyyyyyyyyyyyyyyyyyy”，
“区域”：“zzzzzz”
});
db.query（“显示表”，（错误，数据）=>{
const tableList=数据；
控制台日志（tableList）；
})
}
render（）{
返回(
用户Id:


密码：
登录
{this.state.showComponent&&}
)
}
}
导出默认登录；

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;

从“React”导入React；
类TableContent扩展了React.Component{
构造函数（）{
超级（）；
此.state={
showComponent:false，
};
this.buttonClick=this.buttonClick.bind（this）；
}
按钮点击（事件）{
event.preventDefault（）；
这是我的国家({
showComponent:对，
})
}
render（）{
返回(
桌子


//在此处显示数据库中的表
表1
表2
表3
表4
表5
SQL


SQL
执行
{this.state.showComponent&&}
)
}
}
导出默认表格内容；

组件之间的通信有多种方法，但最简单的方法（不使用Flux或Redux）是使用a作为通信的中介

基本上，父组件将回调传递给一个组件，该组件设置一些状态以传递给另一个组件，例如：

子级创建数据

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>
}

类Child1扩展了React.Component{ 构造函数（）{ 超级（） this.handleClick=this.handleClick.bind（this） } handleClick（）{ this.props.setMessage（“hello world”） } render（）{ 回来打招呼 } } 使用数据的子对象

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>
}

constchild2=（{message}）=>{
返回{message}

}

家长

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>
    )
  }
}

类父级扩展React.Component{
构造函数（）{
超级（）
this.state={消息：}
}
render（）{
返回(
this.setState（{message}}/>
)
}
}

---

如果他们不能成为兄弟姐妹，这种模式可能会有点费力，但仍然可以通过将中介组件作为最低的共同祖先并一直传递相关的道具来实现。不过，此时，您可能需要研究通量或Redux，并将状态完全从组件外部化。

首先。

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&}

3-在子组件中渲染数据。您可以通过

this.props.data

访问它。您可以迭代结果数组并在单个循环中呈现所有表行。看一看

秒：

另外，是否有可能声明一个全局变量并通过另一个js文件访问它

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

小例子：

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

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

本例假设您正在使用es6导入/导出功能。您也可以

要求它