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

Posted 2023-02-24

【中文标题】将数据从一个组件访问到另一个组件

【英文标题】：Accessing the data from one component to another component

【发布时间】：2017-10-10 13:29:08

【问题描述】：

嗨，我开始学习 reactjs。因此，在了解了基础知识之后，我开始使用 reactjs 进行数据库连接。在代码中，我试图获取用户 ID 和密码以建立数据库连接并尝试列出数据库中可用的表。在 Login.js 中，当单击登录按钮时，我创建了一个表单（用户 ID 和密码）我将建立连接并执行 Show Table 查询以列出数据库中的所有表，然后移至 Table.js 页面，其中我尝试列出可用的表格。现在我可以连接到数据库但无法显示Table.js 中的表，所以如何在 Table.js 文件中显示表列表，因为我已将我的数据库连接和查询放在按钮事件中登录.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;

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;

【参考方案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。

第二：

也有可能声明一个全局变量并在其他 js 文件中访问它

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

小例子：

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

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

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

【参考方案2】：

有a number of strategies 用于组件之间的通信，但最简单的方法（不使用Flux 或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>
    )
  

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