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

Question

我正在构建 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 使用我在文件 Webchat.js 中收集的数据。我在文件 Inspector.js.

中找不到从文件 Webchat.js 读取变量值的正确代码

我想构建一个网页，左侧有一个 Chatbot (BotFrameWork) 运行，旁边是一个 table 运行，它显示的数据是由聊天机器人收集。

我尝试了

的答案

how to get a variable from a file to another file in node.js

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

示例： (webchat.js) 我从机器人中获取数据（如 [link]）并将其保存在状态变量 'test'.

中

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

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

var test2 = require ('./webchat'); Console.log(test2.state.test) //这就是我想象的工作方式 --> undefined 使用 require 我只得到一个对象，它有一个 'name' 变量 'Webchat' 并且我可以用它出去： console.log(test2.default.name);

Answer 1

React 只支持 one-way 数据绑定，所以如果你想在多个组件之间共享一个变量，你需要将状态提升到 parent 并将变量和更改处理程序传递给children 作为道具。

在下面的示例中，Parent 有两个 children：ChildA 和 ChildB。我们可以将 myValue 保持在 ChildA 的状态，但是 ChildB 将无法访问它，因此我们将 myValue 提升到 parent 并将其作为道具传递给两个 children 。我们还将更改处理程序传递给 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 });
  }
}

就你引用的样本而言，parentclass是App，两个children是ReactWebChat和Inspector。我建议将变量的状态提升到 parent - App - 并将其作为道具传递给 Inspector class。然后，您可以将自定义存储中间件添加到 ReactWebChat，它会在机器人发送更新事件时更新您的变量。有关如何配置您的 bot 以发送更新事件以及如何让 Web Chat 侦听它们的更多信息，请查看此。

希望对您有所帮助！

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

React App: how to pass a variable to other file and read its value there

reactjs

web-chat