Как прочитать переменную из файла JS, присутствующего в папке root в компоненте React? - PullRequest
Новая
       3

Как прочитать переменную из файла JS, присутствующего в папке root в компоненте React?

0 голосов
/ 01 апреля 2020

Я хочу получить доступ к переменной 'testmsg' из уведомления. js присутствует в папке publi c.

Вот мое уведомление. js код: 

let testmsg = "abc";
self.addEventListener('push', event => {
  console.log(self);
  console.log(event);
  const data = event.data.json();
  testmsg = data;
  console.log(testmsg);
  console.log('New notification', data);
  console.log(data.body);
  const options = {
    body: data.body,
  }
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
})

Вот мое приложение. js

import React from 'react';
import axios from 'axios';
import uuid from 'uuid/v4';
import requestIp from 'ip';
import Message from './Message';
import * as testmsgtemp from '../public/notification.js';

class App extends React.Component {

    constructor(props){
        super(props);
        this.myRef = React.createRef();
        this.state = { resp: '', correlationId: '', name: '', correlationIdRes: '', nameRes: '' };
    }

    WriteDataToKafka = async () => {
        console.log(requestIp.address());
        this.setState({ correlationId: uuid() });
        console.log(this.state.name);
        setTimeout(async function () {
            console.log(this.state.correlationId);
            await axios.get(<service URL>, {
                headers: {
                    uuid: this.state.correlationId,
                    deviceid: Message.getP256dh(),
                    auth: Message.getAuth(),
                    endpoint: Message.getEndpoint(),
                    ipAddress: requestIp.address()
                },
                params: {
                    parameter: this.state.name
                }
            });
        }.bind(this), 50);

        setTimeout(function () {
        console.log("variable:::",testmsgtemp.testmsg);
        }, 600);
    }

     /* eslint-disable */
    componentDidMount(){
        navigator.serviceWorker.register("./notfications.js").then(function(registration){
            console.log(registration);
        });
    }

    render() {
         return (

        <div  ref={this.myRef}>
            <input placeholder="Enter Your Name" onChange={(e) => this.setState({name: e.target.value})}></input>
            <br/><br/>
            <button onClick={this.WriteDataToKafka}>Call Service</button>
            <p>Hej {this.state.nameRes}!</p>
            <p> Unique ID Generated is: {this.state.correlationId}</p>
            <p> Unique ID Received is: {this.state.correlationIdRes}</p>

        </div>);
    }
}

export default App;

Пожалуйста, объясните мне, как читать переменную testmsg в приложении. js. Я также запустил npm eject для импорта уведомлений. js из папки root в sr c. Если значение переменной testmsg можно прочитать внутри приложения. js, тогда я могу использовать его для отображения в DOM. Я пытаюсь разработать утилиту, которая передает данные клиенту без запроса клиента.

1 Ответ

0 голосов
/ 01 апреля 2020

Я буду sh Я не неправильно понял, чего вы пытаетесь достичь, но я стараюсь изо всех сил, если вы хотите иметь доступ к папке publi c, расположенной над папкой sr c, то есть фактически используется вашим браузером для загрузки публикуемой c информации, такой как ваши файлы ico, lo go и др. c, и за пределами вашей папки index.js / app. js, которая находится за пределами реакции, может получить доступ , Но не волнуйтесь, всегда есть другой путь. Вы можете создать другой файл данных внутри вашего sr c и получить к нему доступ и встроить его в пакет.

Если вы пытаетесь получить меньший пакет сборки, вы можете использовать разбиение кода с помощью response.lazy () , Где webpack разделит пакет на несколько для меньшего размера (более быстрая загрузка)

, если это не папка publi c над папкой sr c, которую вы имели в виду ... тогда вы можете просто сделать импорт / экспорт:

например:

уведомление. js код:

export default testmsg = "abc";

В вашем приложении. js

import testmsg from '../public/notification.js';

или 

const testmsg = 'abc'
const exportObject = {testmsg}
export default exportObject;

В вашем приложении. js затем 

import {testmsg} from '../public/notification.js';

, затем просто используйте console.log(testmsg); //abc

...