时间戳

首页 > 解决方案 > React App：如何将变量传递给其他文件并在那里读取它的值

reactjs - React App：如何将变量传递给其他文件并在那里读取它的值

问题描述

我正在构建来自 Github/Webchat 的示例 16，以构建带有网络聊天界面的网页。

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/16.customization-selectable-activity

react 应用程序包含不同的 .js 文件来构建网站（Webchat.js、Instuctor.js、App.js、Index.js），我无法提供文件Inspector.js与我在 file 中收集的数据Webchat.js。我找不到正确的代码来从 fileWebchat.js中的文件读取变量的值Inspector.js。

我想构建一个网页，左侧有一个正在运行的聊天机器人（BotFrameWork），旁边有一个正在运行的表格，其中显示了聊天机器人收集的数据。

我尝试了以下答案

node.js 如何从一个文件中获取一个变量到另一个文件

但不起作用。我试图获取 Webchat 的状态，但只给出undefined.

示例：（webchat.js）我从机器人获取数据（例如 [link] How to create a side window or iframe，以显示由 Web-Chat 在一个网页中收集的数据？）并将其保存在状态变量中'测试'。

(instructor.js) 我想在新数据进入时更新的标签中显示该数据。我现在如何访问在另一个文件中创建的“测试”的值？

什么不起作用：在 instuctor.js 中：

var test2 = 要求 ('./webchat'); Console.log(test2.state.test) //这就是我想象它的工作方式-> undefined with require 我只得到一个具有“名称”变量“Webchat”的对象，我可以使用它：控制台.log(test2.default.name);

标签： reactjsweb-chat

解决方案

React 仅支持单向数据绑定，因此如果您想在多个组件之间共享一个变量，则需要将状态提升到父级，并将变量和更改处理程序作为 props 传递给子级。

在下面的示例中，Parent 有两个孩子：ChildA 和 ChildB。我们可以将 myValue 保持在 ChildA 的状态，但是 ChildB 将无法访问它，因此我们将 myValue 提升到父级并将其作为道具传递给两个子级。我们还向 ChildB 传递了一个更改处理程序，以便它可以在用户单击它时更新该值。

import React from 'react';

const ChildA = ({ myValue }) => (
  <div>
    {
      myValue 
      ? <h1>Hello World</h1>
      : <h1>Goodbye!</h1>
    }
  </div>
);

const ChildB = ({ myValue, handleMyValueChange}) => (
  <button onClick={ () => handleMyValueChange(false) } disabled={ myValue }>
    Click Me!
  </button>
);

class Parent extends React.Component {

  constructor(props) {
    super(props);

    this.state = { myValue: true }
  }

  render() {
    return (
      <div>
        <ChildA myValue={this.props.myValue}/>
        <ChildB myValue={this.props.myValue}  handleMyValueChange={ handleMyValueChange }/>
      </div>
    )
  }

  handleMyValueChange = myValue => {
    this.setState({ myValue });
  }
}

就您引用的示例而言，父类是 App，两个子类是 ReactWebChat 和 Inspector。我建议将变量的状态提升到父级 - 应用程序 - 并将其作为道具传递给 Inspector 类。然后，您可以将自定义存储中间件添加到 ReactWebChat，当机器人发送更新事件时更新您的变量。有关如何配置您的机器人以发送更新事件以及如何让网络聊天监听它们的更多信息，请查看此StackOverflow 问题。

希望这可以帮助！

推荐阅读