React App: как передать переменную в другой файл и прочитать там ее значение - PullRequest
Новая
       5

React App: как передать переменную в другой файл и прочитать там ее значение

0 голосов
/ 09 мая 2019

Я строю пример 16 из Github / Webchat для создания веб-страницы с интерфейсом веб-чата.

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

Приложение реагирования состоит из разных файлов .js для создания веб-сайта (Webchat.js, Instuctor.js, App.js, Index.js), и я не могу предоставить файлу Inspector.js данные, которые я собрал в файл Webchat.js. Я не могу найти правильный код для чтения значения переменной из файла Webchat.js в файле Inspector.js.

Я хочу создать веб-страницу, на которой с левой стороны запущен чатбот (BotFrameWork), а рядом с ним запущена таблица, в которой отображаются данные, собранные чатботом.

Я попробовал ответы от

как получить переменную из файла в другой файл в файле node.js

но не работает. Я пытался получить состояние Webchat, но выдает только undefined.

Пример : (webchat.js) Я извлек данные из бота (например, [ссылка] Как создать боковое окно или фрейм, который отображает данные, собранные веб-чатом на одной веб-странице? ) и сохранил их в переменной состояния 'test'.

(instructor.js) Я хочу показать эти данные, например. в метке, которая обновляется при поступлении новых данных. Как мне теперь получить доступ к значению «test», созданному в другом файле?

Что не работает: в instuctor.js:

var test2 = require ('./webchat'); Console.log (test2.state.test) // это то, как я представляю, как это работает -> undefined с помощью require я получаю только объект, имеющий переменную 'name' 'Webchat' и который я могу получить с помощью: console.log (test2.default.name);

1 Ответ

1 голос
/ 09 мая 2019

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, которое обновляет вашу переменную, когда бот отправляет событие обновления. Для получения дополнительной информации о том, как настроить вашего бота для отправки событий обновления и как прослушивать их через веб-чат, ознакомьтесь с этим StackOverflow Question .

Надеюсь, это поможет!

...