使用 React 生命周期解决 jquery.bind() 匿名函数中的不可访问变量

Question

我需要在匿名绑定函数之外访问 jqconsole 变量。我如何在 JQuery 栖息地之外实例化它？如果可能的话，我会把它保存到全球或我的州。我没能通过这种方式达到运行。

  componentDidMount = () => {
    // Execute after fully loaded
    $(window).bind('load', () => {
      const jqconsole = $('#console').jqconsole(
        'Welcome to the console!\n',
        '>'
      );
      // register some workarounds
      jqconsole.RegisterMatching('{', '}', 'brace');
      jqconsole.RegisterMatching('(', ')', 'paran');
      jqconsole.RegisterMatching('[', ']', 'bracket');

      const startPrompt = () => {
        // scroll to bottom -- NOT WORKING YET
        $('#console').scrollTop($('#console')[0].scrollHeight);
        // Start the prompt with history enabled.
        jqconsole.Prompt(true, input => {
          let transformedString;
          // Manage Output
          try {
            transformedString = window.eval(input);
            if (typeof transformedString === 'object') {
              this.writeToConsole(jqconsole, 'object', transformedString);
            } else {
              this.writeToConsole(jqconsole, 'message', transformedString);
            }

            // Restart the input prompt.
            startPrompt();
          } catch (error) {
            this.writeToConsole(jqconsole, 'error', error);
            // Restart the input prompt.
            startPrompt();
          }
        });
      };
      // Restart the input prompt.
      startPrompt();
    });
  };

准确地说：我有这个 class 方法 writeToConsole，并且想调用它而不必传递 jqconsole 的实例：

  // Manage Output
  writeToConsole = (jqconsole, type, message) => {
    console.log('writing to console @ console');
    if (type === 'error') {
      jqconsole.Write(message + '\n', 'jqconsole-output-error');
    } else if (type === 'message') {
      jqconsole.Write(message + '\n', 'jqconsole-output');
    } else if (type === 'object') {
      jqconsole.Write(JSON.stringify(message) + '\n', 'jqconsole-output');
    } else {
      console.log('error @ writeToConsole');
      return null;
    }
  };

感谢您的宝贵时间和帮助。

Answer 1

我通过在构造函数中将 jqconsole 实例化为 this.myConsole 解决了我自己的问题。这样它就可以在整个组件中访问。

使用 React 生命周期解决 jquery.bind() 匿名函数中的不可访问变量

Solving inaccesible variable inside jquery .bind() anonymous function using react lifecycle

javascript

jquery

reactjs

react-lifecycle