Блог

У меня есть два класса: приложение и QR-код. Класс QRCode возвращает изображение qrcode на основе адреса, указанного в состоянии этого класса. Класс приложения отображает компонент qrcode. В методе getSessionID приложение делает запрос на сервер, затем должно вызвать updateQrCode для обновления отображаемого qr-кода.

Как я могу вызвать метод updateQrCode из App.js? Я не могу создать новый QR-код, потому что это не тот экземпляр, который отображается.

App.js:

 import React, { Component } from "react";
import "./App.css";

import QrCode from "../qrCode/qrCode";

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <QrCode />
        </header>
      </div>
    );
  }

  getSessionID() {
    fetch("/getSessionID")
      .then((res) => {
        // code here to update the qr code in the instance of QrCode
        // QrCode.updateQrCode("test")
      })
      .then((data) => console.log(data.message));
  }
}

export default App;

 

QrCode.js:

 import "./qrCode.css";
import QRCode from "qrcode";
import React, { Component } from "react";

class QrCode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      qrCode: {
        address: null,
        image: null,
      },
    };
  }

  componentDidMount() {
    generateQrCode(this.state.qrCode.address).then(
      function (image) {
        this.setState({
          qrCode: {
            address: this.state.qrCode.address,
            image: image,
          },
        });
      }.bind(this)
    );
  }

  updateQrCode = () => {
    this.setState({
      qrCode: {
        address: "asdf",
        image: null,
      },
    });
  };

  render() {
    return (
      <div>
        <img src={this.state.qrCode.image} alt="QR Code"></img>
      </div>
    );
  }
}

function generateQrCode(address) {
  return new Promise(function (resolve, reject) {
    if (address) {
      QRCode.toDataURL(address, {
        errorCorrectionLevel: "h",
        color: {
          dark: "#000000",
          light: "#0000",
        },
      })
        .then((dataURI) => {
          resolve(dataURI);
        })
        .catch((err) => {
          console.error(err);
          reject(err);
        });
    } else {
      return address;
    }
  });
}

export default QrCode;

 

App.js является родительским компонентом и QrCode.js является дочерним компонентом. От родителя к ребенку вы можете напрямую передавать реквизит.

В App.js, создайте объект состояния и обновите его при получении ответа на выборку. React повторно отображает компонент и его дочерние элементы всякий раз, когда изменяется состояние объекта.

App.js

 import React, { Component } from "react";
import "./App.css";

import QrCode from "../qrCode/qrCode";

class App extends Component {
  constructor(props) {
    super(props);

  this.state = { qrCodeImage: null};
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <QrCode qrCodeImage={this.state.qrCodeImage} />
        </header>
      </div>
    );
  }

  getSessionID() {
    fetch("/getSessionID")
      .then((res) => {
        // code here to update the qr code in the instance of QrCode
        // QrCode.updateQrCode("test")
      })
      .then((data) => this.setState({ qrCodeImage:data }));
  }
}

export default App;
 

QrCode.js

 updateQrCode = () => {
    this.setState({
      qrCode: {
        address: "asdf",
        image: this.props.qrCodeImage,
      },
    });
  };