REACT: HOC не передает функцию компоненту ввода - PullRequest
0 голосов
/ 06 марта 2019

Я пытаюсь построить hoc для моего подключения к sqlite.Этот компонент должен подключиться к базе данных и добавить функцию запроса к обернутому компоненту в качестве реквизита.

database.js

import React from 'react';
import SQLite from 'react-native-sqlite-storage';

export function db(WrappedComponent) {

  SQLite.DEBUG(true);
  SQLite.enablePromise(true);

  // Database connection params
  const databaseName = 'Test.db';
  const databaseVersion = '1.0';
  const databaseDisplayname = 'SQLite Test Database';
  const databaseSize = 200000;
  let db;



  return class extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        rnd: 'prop'
      }
    }

    componentDidMount() {
      this.loadDatabase();
    }

    setError = (error) => this.setState({ error });

    loadDatabase = () => {
      SQLite
        .openDatabase(databaseName, databaseVersion, databaseDisplayname, databaseSize)
        .then((DB) => {
          db = DB;
          db.transaction((tx) => {

            tx
              .executeSql('CREATE TABLE IF NOT EXISTS Users( '
                + 'userId INTEGER PRIMARY KEY NOT NULL, '
                + 'firstName VARCHAR(30), '
                + 'lastName VARCHAR(30), '
                + 'city VARCHAR(30), '
                + 'birthDate VARCHAR(30), '
                + 'phone VARCHAR(30), '
                + 'eMail VARCHAR(30) ); '
              )
              .catch((error) => {
                this.setError(error);
              });

          });
        })
        .catch((error) => {
          this.setError(error);
        });
    };

    query = (queryString) => {
      return db.transaction((tx) => {
        return tx
          .executeSql(query)
          .then(([tx, res]) => [tx, res])
          .catch((error) => {
            this.setError(error);
          });
      })
    }

    rndFunc = (param) => param.toUpperCase();



    render() {
      return <WrappedComponent
        db={{ func: this.rndFunc, prop: this.state.rnd }}
        query={this.query}
        {...this.props}
      />;
    }
  };
}

Завернутый компонент

import React, { Component } from 'react';
import { Text, TouchableOpacity, View, ImageBackground, Image } from 'react-native';
import { db } from '../components/database';

class Comp extends Component {


  submitHandler = () => {


    alert(JSON.stringify(this.props))
  }

  render() {
    return (
      <View >
        <TouchableOpacity
          onPress={this.submitHandler}

        >
          <Text>Submit</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default db(Comp);

Это родное приложение с реагирующей навигацией в качестве маршрутизатора.Он запускается через эмулятор Android.При отправке предупреждения: {db: {prop: "prop"}, навигация: {...}, действия: {}}.Ни rndFun, ни запрос не передаются в обернутый компонент, но передается реквизит в объекте db.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...