Question

我正在尝试为与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);

这是一个以React-Navigation作为路由器的React-Native应用程序。它是通过android模拟器运行的。提交后，警报为{db：{prop：“ prop”}，导航：{...}，操作：{}}。 rndFun或查询都不会传递给包装的组件，但是db对象中的prop都会传递。

反应：HOC不会将功能传递给输入组件

0 个答案: