Как реорганизовать внутреннюю функцию setState в метод статического класса? - PullRequest
Новая
       53

Как реорганизовать внутреннюю функцию setState в метод статического класса?

0 голосов
/ 09 октября 2018

Я хочу изменить внутренний fn из this.setState(fn) в статический метод, который находится внутри класса Utils, Utils.createTargetDict.Я не могу понять, как получить аргумент параметра target из register в только что созданный Utils.createTargetDict.Я считаю, что эта техника FP требует карри, но я просто не могу ее понять. 

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {targets: {}}
  }

  get engine() {
    return {
      state: this.state,
      register: target => {
        this.setState(ps => {
          return {
            targets: {
              ...ps.targets,
              ...Utils.createElement(target),
            },
          };
        });
      },
    }
  }
}

const myComp = new MyComponent();
const engi = myComp.engine;
engi.register({current: {foo: '1', bar: 'a'}});

От: 

register: target => {
  this.setState(ps => {
    return {
      targets: {
        ...ps.targets,
        ...Utils.createElement(target),
      },
    };
  });
},

До: 

register: target => {
  this.setState(Utils.createTargetDict);
},

Utils

class Utils {
  static createTargetDict(ps) {
    return {
      targets: {
        ...ps.targets,
        ...Utils.createElement(target), // this will fail bc target doesn't exist
      },
    };
  }
  static key() {
    let d, r;
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      r = (new Date().getTime() + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
    });
  }

  static createElement(target) {
    const key = Utils.key();
    return {
      [key]: {
        ...target,
        current: {
          ...target.current,
          key: key,
          visibility: false,
        },
      },
    };
  }
}

1 Ответ

0 голосов
/ 09 октября 2018

Вы можете заключить функцию в закрытое положение, чтобы сделать это (обратите внимание, что я слегка изменил имя метода, чтобы показать, что мы генерируем функцию):

MyComponent 

register: target => {
  this.setState(Utils.getCreateTargetDict(target));
},

Утилиты 

class Utils {
  static getCreateTargetDict(target) {
    return (ps) => {
      return {
        targets: {
          ...ps.targets,
          ...Utils.createElement(target),
        },
      };
    };
  }
}
...