Question

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

Login.js

Table.js

Table.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;

Answer 1

组件之间进行通信有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>
    )
  }
}

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

Answer 2

<强>首先

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。

<强>第二

还有可能声明变量global并在另一个js文件中访问它

总之 - 是的。您可以从模块中导出函数，变量，classess。

小例子：

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

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

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

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

2 个答案: