Question

我正在从Github / Webchat的示例16上构建带有Webchat界面的网页。

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中。我找不到正确的代码来从文件Webchat.js中的文件Inspector.js中读取变量的值。

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

我尝试了

的答案

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

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

示例：（webchat.js）我从漫游器中获取了数据（例如[link] How to create a side window or iframe that shows data that was gathered by a Web-Chat in one web page?），并将其保存在状态变量“ test”中。

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

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

var test2 = require（'./webchat'）; Console.log（test2.state.test）//这是我想象的工作方式->未定义与require我只能得到一个具有'name'变量'Webchat'的对象，并且可以通过以下方式获得该对象：console.log（test2.default.name）;

Answer 1

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

在下面的示例中，父级有两个子级：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。我建议将变量的状态提升为父级-App-并将其作为道具传递给Inspector类。然后，您可以将自定义商店中间件添加到ReactWebChat中，该中间件在机器人发送更新事件时更新您的变量。有关如何配置漫游器以发送更新事件以及如何使Web Chat监听更新事件的更多信息，请查看此StackOverflow Question。

希望这会有所帮助！

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

1 个答案: